이 모양은 순수한 CSS로 가능하고 1 div 만 사용합니까?
네 가능합니다. 정확하지 않더라도 귀하의 시도를보고 싶습니다.
방법은 다음과 같습니다. 다음과 같은 요소를 하나만 만듭니다.
<div class="shape"></div>
이 모양을 만들기 위해 모든 것이 CSS로 이루어집니다. 먼저, 상단 둥근 모서리는 다음과 같이 만들어집니다.
border-top-left-radius: 5px;
border-top-right-radius: 5px;
오른쪽의 각도 테두리는 :after다음과 같이 투명한 테두리를 사용하여 CSS 선택기로 만들어집니다 .
border-bottom: 76px solid #333;
border-right: 40px solid transparent;
여기 jsfiddle입니다!
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다