CSS 日常項目中的筆記整理(持續整理)

1. 用CSS畫一個三角形

方法一：隱藏上，左，右三條邊，顏色設定爲（transparent）

css:

    * {margin: 0; padding: 0;}

    .content {

        width: 0;

        height: 0;

        margin: 0 auto;

        border-width: 20px;

        border-style: solid;

        border-color: transparent transparent pink transparent;  // 對應上右下左，此處爲 下 粉色

    }

html:

    <div class="content"></div>

 

方法二： 採用的是均分原理

css:

    * {margin: 0; padding: 0;}

    .content {

        width:0;

        height:0;

        margin:0 auto;

        border:50px solid transparent;

        border-top: 50px solid pink;

    }

html:

    <div class="content"></div>