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

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

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

尖角在上面

效果图：

代码：

[html]

尖角div

尖角在下面

效果图：

代码：

[html]

尖角div

尖角在左边

效果图：

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

代码：

[html]

尖角div

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

렌더링:

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

코드:

[html]

날카로운 모서리 div #right { width:400px; height:250px border:3px solid; 위치:상대적; } .sp1,.sp2 { 디스플레이:블록 너비:0px; ; 글꼴 크기:0; line-height:0; .sp1 { right:-9px; /* 범위는 div 테두리 너비의 5배와 같습니다*/ top:40px /* 날카로운 모서리의 위치를 결정합니다*/ border-right:0px border-top:6px; solid white; /* 색상 변경에 주의하세요*/ border-bottom:6px solid white border-left:6px solid black; > right:6px; /* 자체는 테두리 너비의 2배입니다. */ top:-3px /* 자체 테두리 너비는 -1배입니다. */ border-right:0px; > border-top:3px 단색 검정색 border-left:3px 단색 흰색 🎜> <div id="right"> </div> <title>각진 모서리 div

성명：

이전 기사：CSS에서 !important의 역할다음 기사：CSS에서 !important의 역할

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

관련 기사