찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >날카로운 모서리 div를 구현하는 CSS

날카로운 모서리 div를 구현하는 CSS

高洛峰
高洛峰원래의
2016-11-24 10:33:352076검색

尖角在上面

效果图：

날카로운 모서리 div를 구현하는 CSS

代码：


[html]
 

 
尖角div 
 
 
 
 
 
 
 
 
 
 
 
 



尖角div








尖角在下面

效果图：

 


代码：


[html] 
 

 
尖角div 
 
 
 
 
 
 
 
 
 
 
 
 



尖角div








尖角在左边

效果图：

날카로운 모서리 div를 구현하는 CSS

代码：


[html]
 

 
尖角div 
 
 
 
 
 
 
 
 
 
 
 
 



尖角div








뾰족한 모서리가 오른쪽에 있습니다

렌더링:

날카로운 모서리 div를 구현하는 CSS

코드:


[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으로 문의하세요.
이전 기사：CSS에서 !important의 역할다음 기사：CSS에서 !important의 역할

관련 기사

더보기