0
Github에서 삼각형 주위에 녹색 테두리를 보여주기 위해 두 ::after 요소를 사용합니다.
내가 하나의 ::after 선택기를 사용과 같은 결과를 얻을 수 : 이것처럼
?
그런 일이 가능한지 궁금합니다.
A
답변
1
이이
div {
width:300px;
height:100px;
background:#fff;
border:1px solid green;
position:relative;
padding:20px;
}
div:after {
content:"";
position:absolute;
right:-11px;
top:30px;
width:20px;
height:20px;
background:#fff;
border:1px solid green;
border-left:none;
border-bottom:none;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
user-select:none;
-webkit-user-select: none;
}<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam,quis nostrud exercitation
</div>+0
나는 IE11에서 왼쪽으로 너무 멀리 떨어진 1px의 종류 다. Github의 버전이 더 일관성이있을 수 있습니다. 그리고 그것이 그들이 그렇게했던 이유입니까? – Michael
0
당신은 그
div {
width: 300px;
height: 200px;
background: #fff;
border: 1px solid #1db73f;
position: relative;
padding: 20px;
border-radius:5px;
}
div:before {
content: "";
position: absolute;
right: -20px;
top: 30px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #fff;
z-index:1;
}
div:after {
content: "";
position: absolute;
right: -21px;
top: 30px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #1db73f;
}<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>:after &
:before 선택기를 사용 할 수 있습니다 시도 할 수 있습니다
@dippas 더 나은 복제본이 있습니까? 질문은 잘 말하지 않고 대답은 모두 외부 사이트 (jsfiddle 등)를 참조하며 경계가있는 삼각형에 관한 것은 아닙니다. 이것은 더 높은 품질로 형성되고 있다고 생각합니다. – Michael