css 不用boder 怎么寫(xiě)一個(gè)三角形

受教了一下，在補(bǔ)充下問(wèn)題：
想寫(xiě)一個(gè)類(lèi)似一個(gè)角標(biāo)，上面是長(zhǎng)方形，下面就是兩個(gè)三角形，類(lèi)似這樣：

因?yàn)樗念伾笮∈菚?huì)變的用iconfant或者svg的話(huà)，不太方便，所以想用css手寫(xiě)，但是下邊的角標(biāo)如果用border去寫(xiě)的話(huà)，border又不支持百分比，看看有沒(méi)有什么更好的辦法

其實(shí)可以轉(zhuǎn)換下這個(gè)問(wèn)題，因?yàn)槲蚁戎饕媾R的是，我要在一個(gè)矩形的底部加兩個(gè)三角形，我現(xiàn)在使用border去寫(xiě)的三角形，他的大小我是通過(guò)js去計(jì)算的，有沒(méi)有辦法通過(guò)css讓它根據(jù)這個(gè)矩形的大小去變幻，這個(gè)矩形是它的父級(jí)

回答

編輯回答

心癌

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

2018年6月20日 11:24

編輯回答

舊言

▲
給你個(gè)你想要的方法

    .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畫(huà)一個(gè)

2018年8月23日 14:04

編輯回答

乖乖噠

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

2018年1月12日 14:05

編輯回答

青瓷

字體圖標(biāo)也是一個(gè)不錯(cuò)的選擇～

2018年4月8日 22:32

編輯回答

墨染殤

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

2017年2月16日 15:15

編輯回答

心癌

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

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

2017年7月7日 21:20

編輯回答

真難過(guò)

我想到一個(gè)辦法是旋轉(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

編輯回答