第一次看到有人用 div + css 畫三角形，覺得非常有意思，第一個想到的方法是利用 clip-path 來畫，這個方式最直覺，後來發現他用的是邊框，方法如下 :
<style>
.a06031_1
{
width:2em;
height:2em;
border-width:2em 2em 2em 2em;
border-style:solid;
border-color:#ffff00 #aaffaa #aaaaff #ffaaff;
}
</style>
<div class="a06031_1"></div>
由這裡可以看到，加厚的邊框變成了梯形, 如果把本來的 div 寬度設 0 ，然後把不要的邊框設為透明，那麼三角形就出現了
<style>
.a06032_1
{
width:0em;
height:0em;
border-width:1em 2em 1em 0em;
border-style:solid;
border-color:transparent #aaffaa transparent;
}
</style>
<div class="a06032_1"></div>
同理，還可以畫梯形
那麼這篇的目的是畫箭頭, 這裡我打算用 ::before 來畫
<style>
.a06033_1
{
position:absolute;
width:5em;
height:0.4em;
background-color:#ff0000;
transform-origin: -1em 0.2em;
transform:translate(1em, -0.2em) rotate(0deg);
}
.a06033_1::before
{
position:absolute;
content: "";
width:0;
height:0;
transform:translate(-0.9em, -0.3em);
border-width:0.5em 1em 0.5em 0em;
border-style:solid;
border-color:transparent #ff0000 transparent;
}
</style>
<br>
<div class="a06033_1"></div>
<div class="a06033_1" style="font-size:0.7em;transform:translate(1em, -0.2em) rotate(70deg);width:3em"></div>
<br><br><br>
以後如果需要用到箭頭，就可以引用這個 CSS 然後設定 width , left 和 top , 以及 font-size 來修改大小，然後用 transform rotate 來旋轉，這會是個使用上相當方便的箭頭
既然箭頭都畫了，順便把一些常用的畫一畫
<style>
.a06034_bk
{
display:inline-block;
width:4.2em;
height:4.2em;
border:1px solid #aaa;
}
.a06034_o
{
position:absolute;
border-radius:100em;
width:1em;
height:1em;
border:1px solid #000;
}
.a06034_x
{
position:absolute;
width:1.5em;
height:0.2em;
background-color:#f00;
transform:translate(-0.05em,0.6em) rotate(45deg);
}
.a06034_x::before
{
content:"";
position:absolute;
width:0.2em;
height:1.5em;
background-color:#f00;
transform:translate(0.65em,-0.65em);
}
.a06034_plus
{
position:absolute;
width:1.4em;
height:0.2em;
background-color:#f00;
transform:translate(0em,0.6em);
}
.a06034_plus::before
{
content:"";
position:absolute;
width:0.2em;
height:1.4em;
background-color:#f00;
transform:translate(0.6em,-0.6em);
}
.a06034_ok
{
position:absolute;
width:0.5em;
height:1em;
border-width:0em 0.2em 0.2em 0em;
border-style:solid;
border-color:#0f0;
transform:translate(0.35em,0em) rotate(45deg);
}
.a06034_play
{
position:absolute;
width:1em;
height:1em;
background-color:#0af;
border-radius:100em;
transform:scale(1.3) translate(0.15em,0.15em);
}
.a06034_play:before
{
content:"";
position:absolute;
width:0em;
height:0em;
border-width:0.5em 0em 0.5em 1em;
border-style:solid;
border-color:transparent transparent transparent #ff0;
transform:scale(0.5) translate(0.1em,0em);
}
.a06034_stop
{
position:absolute;
width:1em;
height:1em;
background-color:#0af;
border-radius:100em;
transform:scale(1.3) translate(0.15em,0.15em);
}
.a06034_stop:before
{
content:"";
position:absolute;
width:1em;
height:1em;
background-color:#ff0;
transform:scale(0.4) translate(0em,0em);
}
.a06034_pause
{
position:absolute;
width:1em;
height:1em;
background-color:#0af;
border-radius:100em;
transform:scale(1.3) translate(0.15em,0.15em);
}
.a06034_pause:before
{
content:"";
position:absolute;
width:0.3em;
height:1em;
border-width:0em 0.3em 0em 0.3em;
border-style:solid;
border-color:transparent #ff0 transparent #ff0;
transform:scale(0.4) translate(0.12em,0em);
}
</style>
<div class="a06034_bk">
<div class="a06034_o" style="font-size:3em;border:0.2em solid #0f0"></div>
</div>
<div class="a06034_bk">
<div class="a06034_x" style="font-size:3em;"></div>
</div>
<div class="a06034_bk">
<div class="a06034_plus" style="font-size:3em;"></div>
</div>
<div class="a06034_bk">
<div class="a06034_ok" style="font-size:3em;"></div>
</div>
<div class="a06034_bk">
<div class="a06034_play" style="font-size:3em;"></div>
</div>
<div class="a06034_bk">
<div class="a06034_stop" style="font-size:3em;"></div>
</div>
<div class="a06034_bk">
<div class="a06034_pause" style="font-size:3em;"></div>
</div>
沒有留言:
張貼留言