CSS 3はborderで中空三角矢印(両表記)を書く
2141 ワード
このような中空の三角矢印を探していたが、やっと原理が分かった!自分で記録して、ついでに前に私と同じように望んでいた友达に分かち合います~第1の書き方は、一般的なafter擬似要素 を利用する.
<style type="text/css">
.arrow {
width: 20px;
height: 4px;
margin: 0 auto 7px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #343c99;
transform: rotate(45deg);
transform-origin: left;
}
.arrow:after {
content: '';
display: block;
width: 100%;
height: 100%;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #343c99;
position: absolute;
right: -10px;
top: -14px;
transform: rotate(90deg);
transform-origin: bottom;
}
</style>
<div class="arrow"/>
</code></pre>
<ol>
<li><p> </p></li>
</ol>
<pre><code>
<meta charset="UTF-8"/>
<title/>
<style type="text/css">
/* */
.wb_arrow{
border-right: 2px solid #343c99;
border-top: 2px solid #343c99;
height: 10px;
width: 10px;
margin:50px auto 0;
transform: rotate(deg);
-webkit-transform: rotate(0deg);
/* , */
border-left: 2px solid transparent;
border-bottom: 2px solid transparent;
}
</style>
<div class="wb_arrow"/>
</code></pre>
</div>
</div>
</div>