날카로운 모서리 div를 구현하는 CSS
풀어 주다： 2016-11-24 10:33:35
尖角在上面
效果图：
代码：
[html]
尖角div
尖角div
尖角在下面
效果图：
代码：
[html]
尖角div
尖角div
尖角在左边
效果图：
代码：
[html]
尖角div
尖角div
뾰족한 모서리가 오른쪽에 있습니다
렌더링:
코드:
[html]
날카로운 모서리 div<br> <br>#right <br>{ <br> width:400px; <br> height:250px <br> border:3px solid; <br> 위치:상대적; <br>} <br>.sp1,.sp2 <br>{ <br> 디스플레이:블록 <br> 너비:0px; ; <br> 글꼴 크기:0; <br> line-height:0; <br>.sp1 <br>{ <br> right:-9px; /* 범위는 div 테두리 너비의 5배와 같습니다*/ <br> top:40px /* 날카로운 모서리의 위치를 결정합니다*/ <br> border-right:0px <br> border-top:6px; solid white; /* 색상 변경에 주의하세요*/ <br> border-bottom:6px solid white <br> border-left:6px solid black; > right:6px; /* 자체는 테두리 너비의 2배입니다. */ <br> top:-3px /* 자체 테두리 너비는 -1배입니다. */ <br> border-right:0px; > border-top:3px 단색 검정색 <br> <br> border-left:3px 단색 흰색 <br> <br> 🎜> <br><div id="right"> <br><span class="sp1"><span class="sp2"> <br></span> <br></span>
</div> <br><br> <br><br><br><br><title>각진 모서리 div
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
