Heim >Web-Frontend >CSS-Tutorial >CSS zum Implementieren von Sharp Corner Div

CSS zum Implementieren von Sharp Corner Div

高洛峰Original: 2016-11-24 10:33:352098Durchsuche

尖角在上面

效果图：

代码：

[html]

尖角div

尖角在下面

效果图：

代码：

[html]

尖角div

尖角在左边

效果图：

CSS zum Implementieren von Sharp Corner Div

代码：

[html]

尖角div

Die scharfe Ecke ist rechts

Rendering:

CSS zum Implementieren von Sharp Corner Div

Code:

[html]

Stiltyp = „text/css“> position:relative; } .sp1,.sp2 { display:block; width:0px; ; font-size:0; line-height:0; .sp1 { right:-9px; span ist gleich dem 5-fachen der Breite des div-Rahmens*/ top:40px /* Es bestimmt die Position der scharfen Ecken*/ border-top:6px einfarbig weiß; /* Achten Sie auf die Farbänderungen*/ border-bottom:6px solid white; border-left:6px solid black; > right:6px; /* ist selbst das 2-fache der Breite des Rahmens */ top:-3px /* -1 mal die Breite seines eigenen Rahmens */ border-right:0px border-top:3px solid black; border-left:3px solid white ; 🎜> <div id="right"> < ;/span> </div>

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Die Rolle von !important in CSSNächster Artikel：Die Rolle von !important in CSS

In Verbindung stehende Artikel

Mehr sehen