搜尋

首頁 >web前端 >css教學 >css3 如何做 尖角

css3 如何做 尖角

藏色散人
藏色散人原創
2020-12-11 09:58:153044瀏覽

css3做尖角的方法：先建立一個HTML範例檔；然後確定尖角的位置；最後透過給指定div設定屬性為「top:6px;left:-3px;border-top:0px ;border-bottom...”來實現尖角效果即可。

css3 如何做 尖角

本教學操作環境：windows7系統、css3版、thinkpad t480電腦。

推薦：《css影片教學》

#尖角在上面

效果圖：


#程式碼： 


<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>
尖角在下面

效果圖：


#程式碼：


#

<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>
尖角在左邊

#效果圖：



#

<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>
尖角在右邊

效果圖：


############ ######################
<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>

以上是css3 如何做 尖角的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css css3 html border
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：css能換圖片顏色嗎下一篇：css能換圖片顏色嗎

相關文章

看更多