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

鍍金池/ 問答/HTML5  HTML/ 如圖所示，這樣的tips提示樣式用html+css怎么寫？

如圖所示，這樣的tips提示樣式用html+css怎么寫？

clipboard.png
尤其是尖角樣式，該如何處理？或者有其他屬性可以直接彈出提示？

回答
編輯回答
浪婳

當(dāng)然是偽元素+邊框處理了

<div></div>
div {
  position: relative;
  width: 100px;
  height: 50px;
  background: #ccc;
  margin-top: 10px;
}

div:after {
  content: '';
  position: absolute;
  top: -20px;left:10px;
  border: 10px solid transparent;
  border-bottom-color: red;
}

clipboard.png

2017年12月1日 13:22
編輯回答
落殤

給個例子吧，使用純css實(shí)現(xiàn)三角（三角方向向下，向上css修改下即可）。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>css3面包屑</title>
<style type="text/css">
*{
    margin:0px;
    padding:0px;        
}
img,a {
    border:none;    
}
ul {
    list-style-type:none;    
}
    #tip {
        width:200px;
        height:100px;
        border:1px solid #FF9966;
        margin:100px auto;
        background-color:#FFFF99;
        position:relative;
        padding:10px;
        text-indent:20px;
    }
    #tip i {
        width:0px;
        height:0px;
        line-height:0px;
        position:absolute;
        border-width: 20px 20px 0px 20px;
        border-style:solid dashed dashed dashed;
        border-color:#FF9966 transparent transparent transparent;
        bottom:-20px;
        right:10px;
    }
    
    #tip em {
        width:0px;
        height:0px;
        line-height:0px;
        position:absolute;
        border-width: 18px 18px 0px 18px;
        border-style:solid dashed dashed dashed;
        border-color:#FFFF99 transparent transparent transparent;
        bottom:-18px;
        right:12px;
    }
</style>
</head>
<body>
        <div id = "tip">
                糗友們，我的春天來啦！一樣糗友大力支持?。?！我的幸福就靠你們了！
                <i></i>
                <em></em>
        </div>
</body>
</html>

演示地址：http://jsrun.net/WPgKp/embedd...

實(shí)現(xiàn)三角方案：
1：利用 border 屬性實(shí)現(xiàn)三角形（上面的例子就使用這種方式）。
2：利用”◆“字符實(shí)現(xiàn)三角形
3：利用 CSS3 transfrom 旋轉(zhuǎn) 45 度實(shí)現(xiàn)三角形
4：也可以使用一些字體圖標(biāo)中的三角圖標(biāo)實(shí)現(xiàn)，很容易，比如Font Awesome 字體圖標(biāo)中的chevron-right圖標(biāo)。

2018年1月31日 11:53