怎么實(shí)現(xiàn)一個(gè)消息通知的一個(gè)柜形加三角形，如下圖和代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .div{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 24px;
            box-sizing: border-box;
            border: 1px solid #cdcdcd;
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="div">未答題</div>
</body>
</html>

回答

編輯回答

蝶戀花

偽元素加背景圖片
如果不限麻煩

圖片描述

2017年10月13日 09:39

編輯回答

朕略傻

<div style="width:0; height:0; border-width:30px; border-style:solid;  
border-color:transparent transparent #000 transparent;  
position: absolute;top: -60px;left: 100px;  
"></div>  
<em style="display: block;width:0; height:0; border-width:29px; border-style:solid;  
border-color:transparent transparent #fff transparent;position: absolute;top: -57px;left: 101px;"></em>

</div>
如果不是斜的三角形你可以考慮這個(gè)，方向改變一下,如果一定要你圖中斜的三角形，推薦用svg吧.

2018年6月2日 07:08

編輯回答

黑與白

css 偽類，百度例子一堆

2018年7月18日 08:01

編輯回答

命多硬

上面那個(gè)矩形后面加一個(gè)::after偽類，樣式用背景圖片（就是斜三角），position:absolute定位，z-index大于矩形，基本思路就這樣

2018年4月1日 17:10

編輯回答

葬憶

圖片 svg

<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 50px;
            background-color: #f5f5f5;
            position: relative;
            line-height: 50px;
            text-align: center;
            border: 1px solid #cdcdcd;
            border-radius: 4px;
        }
        div:after{
            content: '';
            width: 0;
            height:0;
            border: 20px solid #f5f5f5;
            border-color: #f5f5f5 transparent transparent transparent;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-150%,100%) skew(-60deg,0);
        }
    </style>
</head>
<body>
<div>tttt</div>
<script>

</script>
</body>
</html>

但三角的邊不知道怎么弄了

2017年9月7日 08:53

編輯回答

晚風(fēng)眠

<div style="height: 0;width:0;border: 10px solid transparent;border-top-color: #f75a47;transform: skewX(-50deg)"></div>

跟圖中效果有點(diǎn)不一樣，三角形周圍的一圈邊框沒有實(shí)現(xiàn)，因?yàn)槭怯靡粋€(gè)div的border實(shí)現(xiàn)的三角形，題主可以用同樣的思路再使用多個(gè)div即可實(shí)現(xiàn)
補(bǔ)充一點(diǎn)：題主的問題跟標(biāo)簽中的大部分語言八竿子打不著，不如加個(gè)css或者h(yuǎn)tml
codePen

2018年2月18日 00:00