使用::before和::after來完成尖角效果_html/css

目標完成下圖效果：

1、分析

在::before和::after偽元素的用法一文中有說到使用::befrore和::after可以完成一個六邊形。這個案例是用一個#star-six完成一個正三角形，通過::after實現一個倒三角形，然后絕對定位放好位置。我們接下來也用這個思路完成。

2、完成

第一步，先完成如下基本的效果，實現一個在瀏覽器中居中的文本

代碼如下：

升級有好禮

第二步，做左右兩邊尖尖的效果?？梢愿鶕鑫褰切堑拇a修改。

代碼如下：

第三步，通過::before來實現第二步中的效果。

代碼還是第二步中的代碼，但是是通過::before來實現記得寫上content:""。然后調整一下尺寸。

.title::before{ width: 0; height: 0; border-left: 40px solid transparent; border-top: 20px solid red; border-bottom: 20px solid red; content: "";}

如果給border-left設置藍色會發現效果如下?！驹磉€不是很懂，不知道這個高度是因為什么原因？？】

結果這是什么鬼？不是想要的效果。此時需要調整布局。

第四步，使用絕對定位調整布局。

.title設置relative，.title::before設置absolute。效果如下。

第五步，通過left調整。

.title{background-color:black;color:#f3e14f;display:inline-block;font-size:18px;height:40px;line-height:40px;position:relative;padding:0 50px;}.title::before{ width: 0; height: 0; border-left: 40px solid transparent; border-top: 20px solid red; border-bottom: 20px solid red; content: ""; position:absolute; left:-40px;}

第六步，同理，通過::after實現右邊效果。

.title::after{ width: 0; height: 0; border-right: 40px solid transparent; border-top: 20px solid red; border-bottom: 20px solid red; content: ""; position:absolute; right:-40px;}

第七步，改下顏色就好了。

完整代碼如下：

 
升級有好禮
国产精品久久久久精品…-国产精品可乐视频最新-亚洲欧美重口味在线-欧美va免费在线观看

效果

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載注明出處：有問題歡迎與我討論，共同進步。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com