css3 如何做 尖角

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

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

推薦：《css影片教學》

#尖角在上面

效果圖：

#程式碼：

<title>尖角p</title>
<style>
#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>



<p>
<span>
<span></span>
</span>
</p>

尖角在下面

效果圖：

#程式碼：

#

<title>尖角p</title>
<style>
#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>



<p>
<span>
<span></span>
</span>
</p>

尖角在左邊

#效果圖：

#

<title>尖角p</title>
<style>
#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>



<p>
<span>
<span></span>
</span>
</p>

尖角在右邊

效果圖：

############ ######################

<title>尖角p</title>
<style>
#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>



<p>
<span>
<span></span>
</span>
</p>

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