TP Notes: 6月 2020

2020年6月26日星期五

即時操作 css

雖然可以用新的 css 取代舊的，這裡還是研究一下即時操作現有 css 的方式
  
document.styleSheets 可以取得目前網頁中所有的 css 資料, 回傳的陣列就是一個 `<style></style>` 的區域

```  
  document.styleSheets[n].cssRules 
```  
就是該區域中的每一個設定的陣列, 
  
```
  document.styleSheets[n].cssRules[m].cssText 
```
就是這個 css 完整字串, 只是這個字串是唯讀的, 必須用
  
```
  document.styleSheets[n].deleteRule(m) 
```
  來刪除這整個設定 <font color="#f00" style="font-size:1.3em">**(什麼爛設計)**</font> , 以及用 
  
```
  document.styleSheets[n].insertRule("css字串",索引) 
```  
  來新增, 索引預設是 0 ，也就是新增後會在最前面，如果沒有把本來的刪掉，新增的效果不會顯示, 然後索引也不能比本來的 Rules 多很多，只能剛好接在後面

然後比較特別的是動畫的 keyframes 
如果下面這個是 keyframes

```
document.styleSheets[n].cssRules[k]
```
那麼
  
```
document.styleSheets[n].cssRules[k].name 
//這個 keyframes 的名稱
document.styleSheets[n].cssRules[k].cssRules[kn] 
//這個 keyframes 裡頭的每個 n% 的設定
document.styleSheets[n].cssRules[k].cssRules[kn].keyText 
//就是 % 的名稱
document.styleSheets[n].cssRules[k].cssRules[kn].cssText
//完整的 css 內容

```

可以用

```
document.styleSheets[n].cssRules[k].findRule("100%")
//搜尋
document.styleSheets[n].cssRules[k].deleteRule("100%")
//刪除
document.styleSheets[n].cssRules[k].appendRule("100%{left:100px}")
//新增

```
在 firefox 和 chrome 即時改變 css 的值，會立刻反應，但是在 safari/iphone/ipad 只要遇到動畫，都會延遲以及不正常反應

寫到最後，覺得還是用新的 css 蓋掉舊的 css 比較好

<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r1)
```
</div>
<div class="mmresult r1">
<style>
.a06261
{
  position:relative;
}
.a06261 .id1
{
  position:absolute;
  width:1em;
  height:1em;
  background-color:#f00;
  left:0px;
  top:0px;
  animation:none 3000ms 0ms 1 linear;
}
@keyframes a06261_a1
{
  0%
  {
    left:0px;
  }
  100%
  {
    left:90%;
  }
}
</style>

</div>
  
<script>

(function()
{

function findallcss(a)
  {
    let i;
    let h1="";
    let h2="";
    let hh="";
    let nn="";
    let r=[];

for (i in document.styleSheets)
    {
      h1="";
      h2="";
      if (typeof(document.styleSheets[i])!="object") continue;

try //必須設 try catch, 以避免 access cross-origin stylesheet 的錯誤
      {
      
        let cssr=document.styleSheets[i].cssRules;
        let j;
        h1+="<hr>"+i+":"+typeof(document.styleSheets[i])+"<hr>";

for (j in cssr)
        {
            if (typeof(cssr[j])!="object") continue;

if (cssr[j].toString()=="[object CSSKeyframesRule]")
            {
              nn=cssr[j].name+" ";
            }
            else
            {
              nn=cssr[j].selectorText+" ";
            }

if (a && nn.indexOf(a)<0) continue;

h2+=j+"_"+cssr[j].toString()+"_";
            h2+=nn;
            h2+="<br>";

r.push(
            {
              css:document.styleSheets[i],
              index:j
            });
            
        }
        if (h2) hh+=h1+h2;
      }
      catch(e)
      {
        console.log(e);
      }
    }
    $(".a06261 .cssinfo").html(hh);
    return r;
  }
  function css2json(r)
  {
    let csstxt=r.css.cssRules[r.index].cssText;
    let cssname=csstxt.match(/(.*)\{/)[1];
    let a=csstxt.match(/\{(.*)\}/)[1].split(";");

let i;
    let j={}

for (i in a)
    {
      let k=a[i].split(":");
      if (k.length<2) continue;
      j[k[0].trim()]=k[1].trim();
    }

j["cssname"]=cssname.trim();
     
    return j;
  }
  function json2css(j)
  {
    let i;
    let cssname=j.cssname;
    let hh="";
    for (i in j)
    {
      if (i=="cssname") continue;
      if (j[i]===null) continue;
      hh+=i+":"+j[i]+";";
    }
    return cssname+" {"+hh+"}";
  }
  function getkeyframes(r)
  {
    let i;
    let kr=r.css.cssRules[r.index];
    let rf=[];
    for (i in kr.cssRules)
    {
      if (typeof(kr.cssRules[i])!="object") continue;
      let f={css:kr,index:i,key:kr.cssRules[i].keyText};
      rf.push(f);
    }
    return rf;
  }
  function cssdelrule(r)
  {
    r.css.deleteRule(r.index);
  }
  function cssaddrule(r,cssstr)
  {
    r.css.insertRule(cssstr,r.index);
  }
  function cssdelkey(kf,key)
  {
    if (!key) key=kf.key;
    kf.css.deleteRule(key);
  }
  function cssaddkey(kf,keystr)
  {
    kf.css.appendRule(keystr);
  }
  $("#a06261_b1").on("click",function()
  {
    let r=findallcss(".a06261 .id1");
    let j=css2json(r[0]);
    j["background-color"]="#00f";
    let css=json2css(j);
    cssdelrule(r[0]);
    cssaddrule(r[0],css);
  });
  $("#a06261_b2").on("click",function()
  {
    let r=findallcss(".a06261 .id1");
    let j=css2json(r[0]);
    j["background-color"]="#f00";
    let css=json2css(j);
    cssdelrule(r[0]);
    cssaddrule(r[0],css);
  });
  $("#a06261_b3").on("click",function()
  {
    let r=findallcss("a06261_a1");
    let kf=getkeyframes(r[0]);
    if (kf.length>=3)
    {
      cssdelkey(kf[0],"50%");
    }
    for (i in kf)
    {
      if (kf[i].key=="0%") break;
    }
    let j=css2json(kf[i]);
    j["background-color"]="#ff0";
    let keystr=json2css(j);
    cssdelkey(kf[i]);
    cssaddkey(kf[i],keystr);

let o=$(".a06261 .id1");
  o.on("animationend",function()
  {
    let o=$(".a06261 .id1");
    o.css("animation-name",""); 
    setTimeout(function()
    {
      o.css("animation-name","a06261_a1"); 
    },10);

});
  o.css("animation-name","a06261_a1");

//  let r=findallcss();
  let r=findallcss("a06261");
})()

</script>  
  
</div>

2020年6月24日星期三

CSS 的 filter

css 的 filter 相當好用，有時候只是想換個顏色，完全不需要再做另一張圖  
  
<style>
.a06241 input
{
  vertical-align:middle
}
.a06241 input[type="range"]
{
  width:90%;
}
.a06241 .idimg
{
  border:1px solid #000;
  padding:5%;
}
</style>

</div>

<div style="display:inline-block;width:35%">
<img src="https://yiharng.github.io/bomb.png" class="idimg" width=70%><br>
<img src="https://yiharng.github.io/bird.jpg" class="idimg" width=70%><br>
  
$textarea id="a06241_filter" style="width:100%;height:8em">$/textarea>

</div>

</div>  
  
<script>

(function()
{
  let ff=
  [
    {name:"blur({v}px)",min:0,max:10,v:0},
    {name:"brightness({v}%)",min:0,max:200,v:100},
    {name:"contrast({v}%)",min:0,max:200,v:100},
    {name:"drop-shadow({v}px {v}px 10px #000)",min:0,max:30,v:0},
    {name:"grayscale({v}%)",min:0,max:100,v:0},
    {name:"invert({v}%)",min:0,max:100,v:0},
    {name:"opacity({v}%)",min:0,max:100,v:100},
    {name:"sepia({v}%)",min:0,max:100,v:0},
    {name:"saturate({v}%)",min:0,max:1000,v:100},
    {name:"hue-rotate({v}deg)",min:0,max:360,v:0},
  ]

let i;

for (i in ff)
  {
    let hh="<div id='a06241_id"+i+"'>"+$("#a06241_id").html()+"</div>";
    let oo=$(hh);
    let v=ff[i].v;
    let ss=ff[i].name.replace(/{v}/g,v);
    oo.find("span").html(ss);
    oo.find("input[type=range]").attr("min",ff[i].min);
    oo.find("input[type=range]").attr("max",ff[i].max);
    oo.find("input[type=range]").attr("value",ff[i].v);

$("#a06241_div").append(oo);
  }

function dofilter()
  {
    let i;
    let hh="";

for (i in ff)
    {
      if ($("#a06241_id"+i+" input[type=checkbox]").prop("checked"))
      {
        hh+=$("#a06241_id"+i+" span").html()+" ";
      }
    }
    $(".a06241 .idimg").css("filter",hh);
    $("#a06241_filter").val(hh);
  }

$("#a06241_div input[type=range]").on("input",function()
  {
    let id=$(this).parent().attr("id");
    let i=id.match(/id(\d*)/)[1];
    let v=$("#"+id+" input[type=range]").val();
    let ss=ff[i].name.replace(/{v}/g,v);
    $("#"+id).find("span").html(ss);

dofilter();
  });

$("#a06241_div input[type=checkbox]").on("change",function()
  {
    dofilter();
  });

$("#a06241_filter").on("input",function()
  {
    let hh=$("#a06241_filter").val();
    $(".a06241 .idimg").css("filter",hh);
  });

})()

</script>

2020年6月4日星期四

用 CSS 畫 3D 物件

第一次看到只用 CSS 就可以畫 3D 物件覺得非常神奇, 想當初在設計導航程式時，在那記憶體只有 16M 的機器上，要跑全台灣/全中國地圖，而且導航除了需要旋轉地圖到行進方向，最好還要有 2.5D 的斜角視圖才可以看到遠方更多的資訊，當時所有計算全部自己寫，光旋轉就要一堆 sin , cos 的計算，而現在只要一行指令就可以旋轉了......
  
3D 的基礎，投影面和視點, 在 CSS 上也必須分層建立好

首先先建一個 view 裡面指定投影距離 **perspective:400px;** 在 view 裡頭建立 camera , 這裡有個很重要的參數 **transform-style: preserve-3d;** 然後在 camera 裡再建立 obj , 同樣的這裡也必須加上 **transform-style: preserve-3d;** ，然後就可以在 obj 中放面的資料

最簡單的範例如下 :

```
$mmcode(r0)
```

<div class="mmresult r0">
<style>
#a06040
{
  width:300px;
  height:300px;
}
#a06040 .view
{
  position:absolute;
  perspective:400px;
  width:300px;
  height:300px;
  perspective-origin:50% 50%;
}
#a06040 .camera
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
}
#a06040 .obj
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  transform:translate3d(0px,0px,-400px);
}
#a06040 .aa
{
  position:absolute;
  width:300px;
  height:300px;
  background-color:#aaaaff;
}
#a06040 .aa1
{
  transform:translate3d(150px,0,0) rotate3d(0,1,0,-60deg);
}
#a06040 .aa2
{
  transform:translate3d(-150px,0,0) rotate3d(0,1,0,60deg);
}
</style>

</div>

-------------------------------------

如果只有一個物件，可以省略 obj 那一層，也就是每個面都是一個物件的概念，
例如以下範例，利用八個面組成一顆鑽石

<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r3)
```
</div>
  
<div class="mmresult r3">
<style>
#a06043 .view
{
  font-size:6em;
  position:relative;
  perspective:3em;
  width:2em;
  height:2em;
  perspective-origin:50% 50%;
  transform:scaley(1);
  border:1px solid #000;
}
#a06043 .camera
{
  position:absolute;
  width:2em;
  height:2em;
  transform-style: preserve-3d;
  animation:a06043_a2 2s 0s linear infinite;
  transform:
    translate3d(0px,0px,-3em)
    rotatey(-0deg);
}
@keyframes a06043_a2
{
  0%
  {
    transform:
    translate3d(0px,0px,-3em)
    rotatey(0deg);
  }
  50%
  {
    transform:
    translate3d(0px,0px,-8em)
    rotatey(180deg);
  }
  100%
  {
    transform:
    translate3d(0px,0px,-3em)
    rotatey(360deg);
  }
}
#a06043 .aa
{
  position:absolute;
  transform-style: preserve-3d;
  width:0em;
  height:0em;
  border-width:0em 1em 2em 1em;
  border-style:solid;
  border-color:transparent transparent #f00 transparent;
  opacity:0.9;
  transform:
    translate3d(0,0em,1em)
    rotatex(45deg)
    translate3d(0,-1em,0em);
}
#a06043 .a1
{
  border-color:transparent transparent #ff8888 transparent;
  transform:
    rotatey(0deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a2
{
  border-color:transparent transparent #ffff88 transparent;
  transform:
    rotatey(90deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a3
{
  border-color:transparent transparent #8888ff transparent;
  transform:
    rotatey(180deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a4
{
  border-color:transparent transparent #88ff88 transparent;
  transform:
    rotatey(-90deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a5
{
  border-color:transparent transparent #ff88ff transparent;
  transform:
    scaley(-1)
    rotatey(0deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a6
{
  border-color:transparent transparent #ffaa88 transparent;
  transform:
    scaley(-1)
    rotatey(90deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a7
{
  border-color:transparent transparent #88ffff transparent;
  transform:
    scaley(-1)
    rotatey(180deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
#a06043 .a8
{
  border-color:transparent transparent #00ff88 transparent;
  transform:
    scaley(-1)
    rotatey(-90deg)
    translate3d(0,0em,1em)
    rotatex(30deg)
    translate3d(0,-1em,0em);
}
</style>

<div id="a06043">
<div class="view">
  <div class="camera">
    <div class="aa a1"></div>
    <div class="aa a2"></div>
    <div class="aa a3"></div>
    <div class="aa a4"></div>
    <div class="aa a5"></div>
    <div class="aa a6"></div>
    <div class="aa a7"></div>
    <div class="aa a8"></div>
  </div>
</div>
</div>
  
</div>  
  
-------------------------------------
  
掌握這個方式後，就可以開始玩 3D 了，這裡寫了一個有趣的展示，只用 CSS 就可以做出早期德軍總部的隧道畫面，這裡用了一個參數 **backface-visibility: hidden;-webkit-backface-visibility: hidden;** 可以把背對的面隱藏，在這個範例中我有偷懶一下，並沒有把所有的面都設到正確的方向，只有一個 aa2 那個面需要在背對時隱藏。
  
<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r1)
```
</div>  
<div class="mmresult r1">
<style>
#a06041 .window
{
  position:relative;
  width:300px;
  height:300px;
  overflow:hidden;
  border:1px solid;
  background-color:#aaffff;
}
#a06041 .view
{
  position:absolute;
  perspective:400px;
  width:300px;
  height:300px;
  perspective-origin:50% 50%;
}
#a06041 .camera
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  animation:a06041_a1 5s 0s linear infinite;
  transform:
    translate3d(0px,0px,calc(150px)) 
    rotate3d(0,1,0,90deg)
    translate3d(0px,0px,calc(150px + 600px));
}
@keyframes a06041_a1
{
  0%
  {
    transform:
      translate3d(0px,0px,0) 
      rotate3d(0,1,0,0deg)
      translate3d(0px,0px,0);
  }
  20%
  {
    transform:
      translate3d(0px,0px,0) 
      rotate3d(0,1,0,20deg)
      translate3d(0px,0px,100px);
  }
  40%
  {
    transform:
      translate3d(0px,0px,0) 
      rotate3d(0,1,0,-20deg)
      translate3d(0px,0px,200px);
  }
  70%
  {
    transform:
      translate3d(0px,0px,calc(150px)) 
      rotate3d(0,1,0,20deg)
      translate3d(0px,0px,calc( 600px));
  }
  90%
  {
    transform:
      translate3d(0px,0px,calc(150px)) 
      rotate3d(0,1,0,80deg)
      translate3d(0px,0px,calc(100px + 600px));
  }
  100%
  {
    transform:
      translate3d(0px,0px,calc(150px)) 
      rotate3d(0,1,0,90deg)
      translate3d(0px,0px,calc(150px + 600px));
  }
}
#a06041 .aa
{
  position:absolute;
  width: 300px;
  height:300px;
  background-image:url(https://yiharng.github.io/bird.jpg);
  background-size:300px 300px;
  transform-origin:150px 150px;
}
#a06041 .aa1
{
  width: 600px;
  transform:
    rotate3D(0,1,0,90deg)
    translate3d(150px,0px,150px);
}
#a06041 .aa2
{
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  width: 900px;
  transform:
    rotate3D(0,1,0,90deg)
    translate3d(150px,0px,-150px)
    ;
}
#a06041 .aa3
{
  height:900px;
  transform:
    rotate3D(1,0,0,-90deg)
    translate3d(0px,150px,-150px)
    ;
}
#a06041 .aa4
{
  height:900px;
  transform:
    rotate3D(1,0,0,-90deg)
    translate3d(0px,150px,150px)
    ;
}
#a06041 .obj
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
}
#a06041 .obj1
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  transform:
    translate3d(150px,00px,calc( -900px + 150px) )
    rotate3D(0,1,0,-90deg)
    ;
}
</style>

---------------------------------
  
加上 javascript 產生面, 可以做個球, 只要花點時間，光靠 CSS 就可以做出旋轉地球了呢 !
  
<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r2)  
```  
</div>
<div class="mmresult r2">
<style>
#a06042 .view
{
  position:relative;
  perspective:400px;
  width:300px;
  height:300px;
  perspective-origin:50% 50%;
  transform:scale(1);
}
#a06042 .camera
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  transform:
    translate3d(0px,0px,0px)
    rotate3d(0,1,0,0deg);
}
#a06042 .obj
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  animation:a06042_a2 10s 0s linear infinite;
  transform:
    translate3d(0px,0px,-400px)
    rotate3d(1,0,0,0deg)
    rotate3d(0,1,0,0deg);
}
@keyframes a06042_a2
{
  0%
  {
    transform:
    translate3d(0px,0px,-400px)
      rotatex(0deg)
      rotatey(0deg);
  }
  100%
  {
    transform:
    translate3d(0px,0px,-400px)
      rotatex(360deg)
      rotatey(720deg);
  }
}
#a06042 .bb
{
  position:absolute;
  width:60px;
  height:60px;
  left: calc(150px - 30px); 
  top: calc(150px - 30px); 
  background-color:#faa;
  border:2px solid #000;
  opacity:1;
  transform:
    rotate3D(0,1,0,50deg)
    rotate3D(1,0,0,30deg)
    translate3d(0px,0px,-250px);
}
</style>

for (j=-4;j<5;j++)
  for (i=0;i<12;i++)
  {
    b=$("<div class='bb'></div>");
    b.css("transform",
       "rotate3D(0,1,0,"+(i*30)+"deg) "
      +"rotate3D(1,0,0,"+(j*20)+"deg) "
      +"translate3d(0px,0px,250px)");
    $("#a06042 .obj").append(b);
  }
})();
</script>

</div>
  
------------------------------------
  
因為 div 是矩形, 雖然可以利用 clip-path 來做裁切，但是裡頭的貼圖並不會跟著變形，如果把解析度提高，那麼每個面都會接近矩形，效果很不錯，只是效能會很差，在調整了一下適當大小，又用了些偷懶的方式，沒有精算的很準確, 最後附上旋轉五色鳥做為這篇的結束，
  
<div style="display:inline-block;width:100%;height:30em;overflow:auto;margin-bottom:2em;">
  
```
$mmcode(r5)
```
</div>
  
<div class="mmresult r5">  
<style>
#a06045 .view
{
  position:relative;
  perspective:400px;
  width:300px;
  height:300px;
  perspective-origin:50% 50%;
  transform:scale(1);
}
#a06045 .camera
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  transform:
    translate3d(0px,0px,0px)
    rotate3d(0,1,0,0deg);
}
#a06045 .obj
{
  position:absolute;
  width:300px;
  height:300px;
  transform-style: preserve-3d;
  animation:a06045_a2 10s 0s linear infinite;
  transform:
    translate3d(0px,0px,-400px)
    rotate3d(1,0,0,0deg)
    rotate3d(0,1,0,0deg);
}
@keyframes a06045_a2
{
  0%
  {
    transform:
    translate3d(0px,0px,-400px)
      rotatey(0deg);
  }
  100%
  {
    transform:
    translate3d(0px,0px,-400px)
      rotatey(360deg);
  }
}
#a06045 .bb
{
  position:absolute;
  width:60px;
  height:50px;
  left: calc(150px - 30px); 
  top: calc(150px - 25px); 
  background-color:#faa;
  border:0px solid #000;
  opacity:1;
  transform:
    rotate3D(0,1,0,50deg)
    rotate3D(1,0,0,30deg)
    translate3d(0px,0px,-250px);
}
</style>

let xx,yy;
  let degy;

degy=11;
  xx=16;

for (j=-5;j<6;j++)
  for (i=0;i<xx;i++)
  {
    k=-j;
    
    b=$("<div class='bb'></div>");

let r=250*Math.cos(k*degy*3.14/180)*2*3.14/xx*1.06;
    b.css("width",r);
    b.css("left","calc(150px - "+(r/2)+"px)");
    b.css("background-image","url(https://yiharng.github.io/bird.jpg)");

let sizey=r*0.4*xx;

b.css("background-size",(r*xx)+"px "+sizey+"px ");
    b.css("background-position"
      ,(r*(xx-i))+"px "+(sizey*(6-j)/13+50)+"px");

b.css("transform",
       "rotate3D(0,1,0,"+(i*(360/xx))+"deg) "
      +"rotate3D(1,0,0,"+(k*degy)+"deg) "
      +"translate3d(0px,0px,250px)");
    $("#a06045 .obj").append(b);
  }
})();
</script>
</div>

2020年6月3日星期三

用 CSS 畫箭頭

第一次看到有人用 div + css 畫三角形，覺得非常有意思，第一個想到的方法是利用 clip-path 來畫，這個方式最直覺，後來發現他用的是邊框，方法如下 :

```
$mmcode(r1)  
```  
<div class="mmresult r1">
<style>
.a06031_1
{
  width:2em;
  height:2em;
  border-width:2em 2em 2em 2em;
  border-style:solid;
  border-color:#ffff00 #aaffaa #aaaaff #ffaaff;
}
</style>

由這裡可以看到，加厚的邊框變成了梯形, 如果把本來的 div 寬度設 0 ，然後把不要的邊框設為透明，那麼三角形就出現了

```
$mmcode(r2)  
```  
<div class="mmresult r2">
<style>
.a06032_1
{
  width:0em;
  height:0em;
  border-width:1em 2em 1em 0em;
  border-style:solid;
  border-color:transparent #aaffaa transparent;
}
</style>

同理，還可以畫梯形

那麼這篇的目的是畫箭頭, 這裡我打算用 ::before 來畫

```
$mmcode(r3)  
```  
<div class="mmresult r3">
<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>
</div>

以後如果需要用到箭頭，就可以引用這個 CSS 然後設定 width , left 和 top , 以及 font-size 來修改大小，然後用 transform rotate 來旋轉，這會是個使用上相當方便的箭頭
  
既然箭頭都畫了，順便把一些常用的畫一畫
  
```
$mmcode(r4)
```
  
<div class="mmresult r4">

</div>

訂閱：文章 (Atom)

Translate

2020年6月26日 星期五

即時操作 css

2020年6月24日 星期三

CSS 的 filter

2020年6月4日 星期四

用 CSS 畫 3D 物件

2020年6月3日 星期三

用 CSS 畫箭頭

2020年6月26日星期五

2020年6月24日星期三

2020年6月4日星期四

2020年6月3日星期三