여러 줄의 텍스트를 담을 수 있는 이미지의 상단 모서리에 DIV 블록을 배치하려고 합니다. 아래와 같이 이미지 모서리에 오버레이를 만들었습니다.
.sliderImgWrapper {
position: relative;
width: 200px;
height: 300px;
border: 2px solid #000000;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
border-top: 50px solid #FF0000;
border-right: 50px solid transparent;
}
.overlayImage {
position: absolute;
top: -50px;
left: -25px;
}
<div class="sliderImgWrapper"> <div class="overlay"> </div></div>
하지만 이미지의 투명도를 div의 한쪽에 있는 밝은 음영으로 만드는 방법을 잘 모르겠습니다. 이미지와 비슷하거나 자세히 보면
또한 다음과 같은 빨간색 영역 안에 텍스트를 담을 범위를 배치한 후
<div class="overlay"> <span style="color:blue;">title</span> </div>
삼각형이 깨져보인다
- 답변 # 1
의사 요소를 사용하여 추가 마크업 없이 이 작업을 수행할 수 있습니다.