<style>
.square{
width:200px;
height:100px;
position:relative;
border:1px #ccc solid;
margin:30px;
}
/* .square:before{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
top:-29%;
left:5%;
border:15px solid #ccc;
border-color:transparent transparent #fff transparent;
z-index:2;
} */
.square:after{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
top:-30%;
left:5%;
border:15px solid #FFF;
border-color:transparent transparent #ccc transparent;
z-index:1;
}
</style>
<div class='square'></div>
```
<style>
.square{
width:200px;
height:100px;
position:relative;
border:1px #ccc solid;
margin:30px;
}
/* .square:before{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
top:-29%;
left:5%;
border:15px solid #ccc;
border-color:transparent transparent #fff transparent;
z-index:2;
} */
.square:after{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
top:0;
right:0;
border:15px solid #FFF;
border-color:red red transparent transparent;
z-index:1;
}
</style>
<div class='square'></div>
<style>
.square{
width:200px;
height:100px;
position:relative;
border:1px #ccc solid;
margin:30px;
}
.square:before{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
top:-29%;
left:5%;
border:15px solid #ccc;
border-color:transparent transparent #fff transparent;
z-index:2;
}
.square:after{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
top:-30%;
left:5%;
border:15px solid #FFF;
border-color:transparent transparent #ccc transparent;
z-index:1;
}
</style>
<div class='square'></div>
給定的html代碼是： <div class='square'></div>
平常實(shí)現(xiàn)我們常是通過添加小的icon來實(shí)現(xiàn)，不僅需要添加圖片資源，還需要改動(dòng)html結(jié)構(gòu)。
CSS偽元素
css中偽元素有四個(gè)，分別是:first-line,:first-letter,:before,:after。其中前兩個(gè)分別選擇的是目標(biāo)元素內(nèi)第一行文本和第一個(gè)字母，可以為其添加多余樣式。
而最常用的就是:before和:after，這兩個(gè)偽元素與前兩個(gè)的用法不同，而用處也更大。
:before,:after分別用于向當(dāng)前元素前和后添加指定的content內(nèi)容，具體事例用法如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS輸出各種圖形</title>
<style type="text/css">
p:before{
content:"開始";
color:#F00;
font-size:12px;
}
p:after{
content:"結(jié)束";
color:#003;
font-size:30px;
border:1px solid #000;
width:100px;
}
</style>
</head>
<body>
<p>偽元素 測(cè)試</p>
</body>
</html>
復(fù)制代碼
上面代碼的運(yùn)行結(jié)果如圖：
可以認(rèn)為:before和:after兩個(gè)偽元素是添加到當(dāng)前p標(biāo)簽前后的兩個(gè)元素，但是應(yīng)該也會(huì)發(fā)現(xiàn)在p:after中寫的width:100px;并沒有奏效，這就說明了偽元素的顯示是inline的，而不是block。
至于偽元素有幾個(gè)需要注意的地方：
1.偽元素在元素內(nèi)部的顯示為inline，因此想要用偽元素實(shí)現(xiàn)更多效果，比如上面的題目，就必須把偽元素當(dāng)做block元素來用。
2.偽元素列表屬性中content必不可少，即使內(nèi)容為空，content也不能為空，否則會(huì)不顯示。
3.偽元素content除了可以設(shè)置為文字之外，還可以設(shè)置為圖片，例如p:before{content:url(icon.gif);}
4.偽元素目前已經(jīng)得到IE8及以上瀏覽器，可以放心使用。
用CSS做出來一個(gè)三角形或者別的形狀
掌握了偽元素之后，就可以實(shí)現(xiàn)上面的題目了。很明顯，是通過偽元素做出了一個(gè)三角形。怎么做呢？
用CSS代碼實(shí)現(xiàn)三角形很簡(jiǎn)單，嘗試一下就可以寫出來：，html代碼為<div class="triangle"></div>, css代碼如下
.trangle{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}
別的形狀也是大同小異，通過設(shè)置不同的border-radius和border-width來實(shí)現(xiàn)，但是兼容性有問題，IE9及以上才會(huì)正常（自然是border-radius的問題）。
但是可以看出來元素已經(jīng)是用border勾勒出來的了，但是題目中的三角形是帶有黑色邊框的，很明顯不能通過一個(gè)偽元素來搞定，那就兩個(gè)一起。
通過設(shè)定偽元素的position:absolute和z-index屬性，構(gòu)成偽元素的疊加，底層是黑色，上層是白色即可。
原題目的CSS具體實(shí)現(xiàn)代碼如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS輸出各種圖形</title>
<style type="text/css">
.square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}
.square:before{
content:"";
width:0px;
height:0px;
display:block;
position:absolute;
z-index:2;
top:25%;
right:-28px;
border:15px solid #FFF;
border-color:transparent transparent transparent #FFF;
}
.square:after{content:"";
width:0px;
height:0px;
display:block;
position:absolute;
z-index:1;
top:25%;
right:-30px;
border:15px solid #FFF;
border-color:transparent transparent transparent #000;
}
</style>
</head>
<body>
<div class='square'></div>
</body>
</html>
給定的html代碼是： <div class='square'></div>
平常實(shí)現(xiàn)我們常是通過添加小的icon來實(shí)現(xiàn)，不僅需要添加圖片資源，還需要改動(dòng)html結(jié)構(gòu)。
CSS偽元素
css中偽元素有四個(gè)，分別是:first-line,:first-letter,:before,:after。其中前兩個(gè)分別選擇的是目標(biāo)元素內(nèi)第一行文本和第一個(gè)字母，可以為其添加多余樣式。
而最常用的就是:before和:after，這兩個(gè)偽元素與前兩個(gè)的用法不同，而用處也更大。
:before,:after分別用于向當(dāng)前元素前和后添加指定的content內(nèi)容，具體事例用法如下：
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS輸出各種圖形</title>
<style type="text/css">
p:before {
content: "開始";
color: #F00;
font-size: 12px;
}
p:after {
content: "結(jié)束";
color: #003;
font-size: 30px;
border: 1px solid #000;
width: 100px;
}
</style>
</head>
<body>
<p>偽元素 測(cè)試</p>
</body>
</html>
</pre>
可以認(rèn)為:before和:after兩個(gè)偽元素是添加到當(dāng)前p標(biāo)簽前后的兩個(gè)元素，但是應(yīng)該也會(huì)發(fā)現(xiàn)在p:after中寫的width:100px;并沒有奏效，這就說明了偽元素的顯示是inline的，而不是block。
至于偽元素有幾個(gè)需要注意的地方：
1.偽元素在元素內(nèi)部的顯示為inline，因此想要用偽元素實(shí)現(xiàn)更多效果，比如上面的題目，就必須把偽元素當(dāng)做block元素來用。
2.偽元素列表屬性中content必不可少，即使內(nèi)容為空，content也不能為空，否則會(huì)不顯示。
3.偽元素content除了可以設(shè)置為文字之外，還可以設(shè)置為圖片，例如p:before{content:url(icon.gif);}
4.偽元素目前已經(jīng)得到IE8及以上瀏覽器，可以放心使用。
用CSS做出來一個(gè)三角形或者別的形狀
掌握了偽元素之后，就可以實(shí)現(xiàn)上面的題目了。很明顯，是通過偽元素做出了一個(gè)三角形。怎么做呢？
用CSS代碼實(shí)現(xiàn)三角形很簡(jiǎn)單，嘗試一下就可以寫出來：[圖片上傳中...(image-aa3c1a-1511271151620-4)]
，html代碼為<div class="triangle"></div>, css代碼如下
.trangle{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}
別的形狀也是大同小異，通過設(shè)置不同的border-radius和border-width來實(shí)現(xiàn)，但是兼容性有問題，IE9及以上才會(huì)正常（自然是border-radius的問題）。
但是可以看出來元素已經(jīng)是用border勾勒出來的了，但是題目中的三角形是帶有黑色邊框的，很明顯不能通過一個(gè)偽元素來搞定，那就兩個(gè)一起。
通過設(shè)定偽元素的position:absolute和z-index屬性，構(gòu)成偽元素的疊加，底層是黑色，上層是白色即可。
原題目的CSS具體實(shí)現(xiàn)代碼如下：
<pre>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS輸出各種圖形</title>
<style type="text/css">
.square {
width: 100px;
height: 100px;
background-color: #FFF;
position: relative;
border: 2px #000000 solid;
}
.square:beforem {
content: "";
width: 0px;
height: 0px;
display: block;
position: absolute;
z-index: 2;
top: 25%;
right: -28px;
border: 15px solid #FFF;
border-color: transparent transparent transparent #FFF;
}
.square:after {
content: "";
width: 0px;
height: 0px;
display: block;
position: absolute;
z-index: 1;
top: 25%;
right: -30px;
border: 15px solid #FFF;
border-color: transparent transparent transparent #000;
}
</style>
</head>
<body>
<div class ='square'>
</div>
</body>
</html>
</pre>
