Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie scharfe Ecken in CSS3

So erstellen Sie scharfe Ecken in CSS3

藏色散人
藏色散人Original
2020-12-11 09:58:153014Durchsuche

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.

So erstellen Sie scharfe Ecken in CSS3

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!

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