在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Java  PHP  Python  C  HTML/ 怎么實現(xiàn)一個消息通知的一個柜形加三角形，如下圖和代碼

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

clipboard.png

<!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>
回答
編輯回答
蝶戀花
  1. 偽元素 加背景圖片
  2. 如果不限麻煩

圖片描述

圖片描述

2017年10月13日 09:39
編輯回答
朕略傻

<div style=" margin-top: 100px;width: 300px;height: 300px;position: relative;border: 1px solid #000000">

<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>
如果不是斜的三角形你可以考慮這個，方向改變一下,如果一定要你圖中斜的三角形，推薦用svg吧.

2018年6月2日 07:08
編輯回答
黑與白

css 偽類，百度例子一堆

2018年7月18日 08:01
編輯回答
命多硬

上面那個矩形后面加一個::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>

跟圖中效果有點不一樣，三角形周圍的一圈邊框沒有實現(xiàn)，因為是用一個div的border實現(xiàn)的三角形，題主可以用同樣的思路再使用多個div即可實現(xiàn)
補充一點：題主的問題跟標(biāo)簽中的大部分語言八竿子打不著，不如加個css或者html
codePen

2018年2月18日 00:00