鍍金池/ 問答/HTML/ css 不用boder 怎么寫一個三角形

css 不用boder 怎么寫一個三角形

受教了一下，在補充下問題：
想寫一個類似一個角標，上面是長方形，下面就是兩個三角形，類似這樣：

clipboard.png
因為他的顏色，大小是會變的 用iconfant或者svg的話，不太方便，所以想用css手寫，但是下邊的角標如果用border去寫的話，border又不支持百分比，看看有沒有什么更好的辦法

其實可以轉(zhuǎn)換下這個問題，因為我先主要面臨的是，我要在一個矩形的底部加兩個三角形，我現(xiàn)在使用border去寫的三角形，他的大小我是通過js去計算的，有沒有辦法通過css讓它根據(jù)這個矩形的大小去變幻，這個矩形是它的父級

回答
編輯回答
心癌

iconfont 搜索 旗幟
有很多
既然是字體，那當然能夠改變大小和顏色

2018年6月20日 11:24
編輯回答
舊言

▲
給你個你想要的方法

    .i {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: #000;
      clip-path:polygon(10px 0px, 0px 20px, 20px 20px);
    }
2018年3月16日 06:22
編輯回答
爆扎

也可以用canvas畫一個

2018年8月23日 14:04
編輯回答
乖乖噠

可以分成左右兩個直角三角形和上面一整塊長方形啊，另 clip-path 才是正道

2018年1月12日 14:05
編輯回答
青瓷

字體圖標也是一個不錯的選擇～

2018年4月8日 22:32
編輯回答
墨染殤

定義一個div
div的背景顏色可以分成四部分設(shè)置；這樣就能做到你的效果

2017年2月16日 15:15
編輯回答
心癌

思路：先css定義一個長方形的box，然后拿一張白色三角形的png圖片，把這張圖片放到box里面，利用flex布局將圖片定位到底部，寬度設(shè)置成百分之百，高度按需求設(shè)置百分值；或?qū)D片設(shè)置成背景圖，利用background-position和background-size定位

缺點：在白色部分下面不能有內(nèi)容，否則會被遮擋

2017年7月7日 21:20
編輯回答
真難過

我想到一個辦法是旋轉(zhuǎn)矩形

.flag{
    width: 200px;
    height: 400px;
    overflow: hidden;
    background: orangered;
    position: relative;
}
.flag:after{
    content: '';
    width: 200px;
    height: 200px;
    position: absolute;
    top: 300px;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    transform: rotate(45deg);
}
2018年7月22日 11:49
編輯回答
話寡

現(xiàn)在阿里矢量圖有一種新型的引用方式：symbol引用，支持多色圖標
具體使用方法和優(yōu)缺點可以點擊這里查看

2017年12月16日 22:51
編輯回答
醉淸風

用iconFont才是正解

2018年6月17日 16:48