第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

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

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

PHP
慕田峪4524236 2019-03-05 08:44:11
<!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>
查看完整描述

6 回答

?
蝴蝶刀刀

TA貢獻1801條經(jīng)驗 獲得超8個贊

圖片 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>

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

查看完整回答
反對 回復(fù) 2019-03-18
?
翻閱古今

TA貢獻1780條經(jīng)驗 獲得超5個贊

css 偽類，百度例子一堆

查看完整回答
反對 回復(fù) 2019-03-18
?
叮當(dāng)貓咪

TA貢獻1776條經(jīng)驗 獲得超12個贊

<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吧.

查看完整回答
反對 回復(fù) 2019-03-18
?
倚天杖

TA貢獻1828條經(jīng)驗 獲得超3個贊

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

https://img1.sycdn.imooc.com//5c8f518100012a4705350800.jpg

https://img1.sycdn.imooc.com//5c8f518200014b3708000147.jpg

查看完整回答
反對 回復(fù) 2019-03-18
?
繁星淼淼

TA貢獻1775條經(jīng)驗 獲得超11個贊

<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

查看完整回答
反對 回復(fù) 2019-03-18
  • 6 回答
  • 0 關(guān)注
  • 542 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號