CSS3 帶有箭頭圓角效果

admin發表於2017-02-19
CSSS3
本章節介紹一下如何實現圓角效果的矩形帶有小箭頭的效果。

先看程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
p.speech{   
  position:relative;   
  width:200px;   
  height:100px;   
  text-align:center;   
  line-height:100px;   
  background-color:#fff;   
  border:8px solid #666;   
  border-radius:30px;   
  box-shadow:2px 2px 4px #888;   
}
p.speech:before{   
  content:' ';   
  position:absolute;   
  width:0;   
  height:0;   
  left:30px;   
  top:100px;   
  border:25px solid;   
  border-color:#666 transparent transparent #666;   
}      
</style>
</head>
<body>
<p class="speech"></p>  
</body>
</html>

上面的程式碼初步實現了我們的要求，下面介紹一下其中幾個注意點:

（1）.p元素採用的是相對定位，這是為了作為絕對定位的偽元素定位參考物件，以便將三角形定位到左下角。

（2）.三角形的實現方式可以參閱CSS 三角形效果一章節。

但是上面的程式碼並不是太完美，因為三角形部分都是灰色的，並不美觀，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style>
p.speech{   
  position:relative;   
  width:200px;   
  height:100px;   
  text-align:center;   
  line-height:100px;   
  background-color:#fff;   
  border:8px solid #666;   
  border-radius:30px;   
  box-shadow:2px 2px 4px #888;   
}
p.speech:before{   
  content:' ';   
  position:absolute;   
  width:0;   
  height:0;   
  left:30px;   
  top:100px;   
  border:25px solid;   
  border-color:#666 transparent transparent #666;   
} 
p.speech:after{   
  content:' ';   
  position:absolute;   
  width:0;   
  height:0;   
  left:38px;   
  top:100px;   
  border:15px solid;   
  border-color:#fff transparent transparent #fff;   
}       
</style>
</head>
<body>
<p class="speech"></p>  
</body>
</html>

上面的程式碼實現了我們的要求，其實很簡單，就是又新增一個偽元素，這個偽元素也是三角形的，並且設定邊框顏色透明，覆蓋在灰色的上面，於是就實現了我們的要求。

相關文章