Heim > Artikel > Web-Frontend > So erstellen Sie scharfe Ecken in CSS3
So erstellen Sie scharfe Ecken in CSS3: Erstellen Sie zunächst eine HTML-Beispieldatei. Bestimmen Sie dann die Position der scharfen Ecken. Setzen Sie schließlich die Attribute des angegebenen Div auf „top:6px;left:-3px;border-top:“ 0px;border-bottom" ..." um den scharfen Eckeneffekt zu erzielen.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, Thinkpad T480-Computer.
Empfohlen: „CSS-Video-Tutorial“
Die scharfen Ecken sind oben
Rendering:
Code:
<html> <head> <title>尖角p</title> <style type="text/css"> #top { width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0; } .sp1 { top:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */ left:40px; /* 它来确定尖角的位置 */ border-top:0px; border-bottom:6px solid black; /* 注意颜色的变化 */ border-right:6px solid white; border-left:6px solid white; } .sp2 { top:6px; /* 是自身边框宽度的2倍 */ left:-3px; /* 是自身边框宽度的-1倍 */ border-top:0px; border-bottom:3px solid white; border-right:3px solid black; border-left:3px solid black; } </style> </head> <body> <p id="top"> <span class="sp1"> <span class="sp2"></span> </span> </p> </body> </html>
Die scharfen Ecken sind unten
Rendering:
Code:
<html> <head> <title>尖角p</title> <style type="text/css"> #bottom { width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0; } .sp1 { bottom:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */ left:40px; /* 它来确定尖角的位置 */ border-bottom:0px; border-top:6px solid black; /* 注意颜色的变化 */ border-right:6px solid white; border-left:6px solid white; } .sp2 { bottom:6px; /* 是自身边框宽度的2倍 */ left:-3px; /* 是自身边框宽度的-1倍 */ border-bottom:0px; border-top:3px solid white; border-right:3px solid black; border-left:3px solid black; } </style> </head> <body> <p id="bottom"> <span class="sp1"> <span class="sp2"></span> </span> </p> </body> </html>
Die scharfe Ecke ist links
Rendering:
Code:
<html> <head> <title>尖角p</title> <style type="text/css"> #left { width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0; } .sp1 { left:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */ top:40px; /* 它来确定尖角的位置 */ border-left:0px; border-top:6px solid white; /* 注意颜色的变化 */ border-right:6px solid black; border-bottom:6px solid white; } .sp2 { left:6px; /* 是自身边框宽度的2倍 */ top:-3px; /* 是自身边框宽度的-1倍 */ border-left:0px; border-top:3px solid black; border-right:3px solid white; border-bottom:3px solid black; } </style> </head> <body> <p id="left"> <span class="sp1"> <span class="sp2"></span> </span> </p> </body> </html>
Tipp Ecke rechts
Rendering:
Code:
<html> <head> <title>尖角p</title> <style type="text/css"> #right { width:400px; height:250px; border:3px solid; /* 边框宽度为3px */ position:relative; } .sp1,.sp2 { display:block; height:0px; width:0px; position:absolute; font-size:0; line-height:0; } .sp1 { right:-9px; /* 它的绝对值加上span的边框宽度等于p边框宽度的5倍 */ top:40px; /* 它来确定尖角的位置 */ border-right:0px; border-top:6px solid white; /* 注意颜色的变化 */ border-bottom:6px solid white; border-left:6px solid black; } .sp2 { right:6px; /* 是自身边框宽度的2倍 */ top:-3px; /* 是自身边框宽度的-1倍 */ border-right:0px; border-top:3px solid black; border-bottom:3px solid black; border-left:3px solid white; } </style> </head> <body> <p id="right"> <span class="sp1"> <span class="sp2"></span> </span> </p> </body> </html>
Das obige ist der detaillierte Inhalt vonSo erstellen Sie scharfe Ecken in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!