使用 before和 after來完成尖角效果

目標完成下圖效果：

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

**如下：

<

style
>
.middle
.title
style
>
<
div 
class
="middle"
>
<
h5 class
="title"
>公升級有好禮
**如下：
<

style
>
#star-three 
style
>
<
div 
id="star-three"
>
div>
**還是第二步中的**，但是是通過::before來實現記得寫上content:""。然後調整一下尺寸。

如果給border-left設定藍色會發現效果如下。【原理還不是很懂，不知道這個高度是因為什麼原因？？】
結果這是什麼鬼？不是想要的效果。此時需要調整布局。
.title設定relative，.title::before設定absolute。效果如下。
.title.title::before

.title::after
完整**如下：

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
/>
<
title
>demo of starof
title
>
<
style
>
.middle
.title
.title::before
.title::after
style
>
head
>
<
body
>
<
div 
class
="middle"
>
<
h5 class
="title"
>公升級有好禮
h5>
div>
body
>
html
>
view code

效果
ie8如果要使用before和after偽元素，加上，然後使用單冒號的:before和:after。
ie6，ie7是不支援的。
ie6和ie7相容性的處理可參考：小tip:我是如何在實際專案中使用before/after偽元素的
 
Before和 After的使用
before的作用就是在乙個類中最先執行的方法 after的作用就是在乙個類中最後執行的方法 這樣就可以把一些重複執行的 抽取出來 這樣我們就不用書寫這些的重複的部分了 例如下面的這段 這是進行查詢 當我們書寫增刪改時候還得全部寫很麻煩 test public void testfindall th...
學習使用 before和 after偽元素
如果你一直密切關注著各種網頁設計的部落格，你可能已經注意到了 before和 after偽元素已經在前端開發中獲得了相當多的關注。特別是在nicolas gallagher的部落格中，後期運用了很多偽類元素。nicolas gallagher使用偽元素用靜態的html標籤建立84個gui圖示。為了補...
學習使用 before和 after偽元素
如果你一直密切關注著各種網頁設計的部落格，你可能已經注意到了 before和 after偽元素已經在前端開發中獲得了相當多的關注。特別是在nicolas gallagher的部落格中，後期運用了很多偽類元素。nicolas gallagher使用偽元素用靜態的html標籤建立84個gui圖示。為了補...