css實現三角形

css三角形實現代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .up{
            width: 0px;
            height: 10px;
            border-bottom: 10px solid red;
            border-left:10px solid transparent;
            border-right: 10px solid transparent;
            border-top:0;
        }
        .down{
            width: 0px;
            height: 10px;
            border-top: 10px solid red;
            border-left:10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom:0;
        }
        .left{
            height: 0;
            width: 10px;
            border-left:10px solid red;
            border-bottom:10px solid transparent;
            border-top:10px solid transparent;
            border-right:0;
        }
        .right{
            height: 0;
            width: 10px;
            border-right:10px solid red;
            border-bottom:10px solid transparent;
            border-top:10px solid transparent;
            border-left:0;
        }
    </style>
</head>
<body>
    <div class="down"></div>
    <div class="left"></div>
    <div class="right"></div>
    <div class="up"></div>
</body>
</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 今天學到的兩種方式可以實現三角形,簡單寫一下 方法一: html代碼: 我是三角形 css代碼如下:用偽元素實現一...
    石子1110閱讀 554評論 0 0
  • html 因為每個圖形都有一些共同的樣式,所以為每個div設置兩個class,一個公共的class,一個各自的cl...
    李永州的FE閱讀 306評論 0 0
  • 我們在使用CSS框架的時候,經常會用到下拉框組件,一般該組件里面有個下三角。此外,我們經常用的tooltip,一般...
    康斌閱讀 19,562評論 18 61
  • 我們經常在逛網頁的時候,會看到一些三角形,比如下面這張圖,個人中心后面有個三角形,那么我們如何利用css樣式來繪制...
    雅玲啞鈴閱讀 1,340評論 1 11
  • 最近在逛某個技術網站的時候,感覺文章關鍵詞上的樣式好酷炫啊,分頁的樣式。來張截圖: 你在首頁的底部也可以看到這樣一...
    web前端學習閱讀 959評論 0 4