這樣的下三角氣泡框用純css3如何實現
問題描述
這樣的下三角氣泡框用純css3如何實現,如圖
問題解答
回答1:樓上2位的畫出來的三角形好像都是純背景色的三角形!這種虛線型的三角形好像真不好畫!!!如果只是視覺上的這種效果,小面一個小的p有2個虛線邊框在旋轉45度絕對定位到那個大的虛線p上即可如:.d1{
position: relative;border: 1px dashed #999;background: #fff;width: 150px;height: 100px;
}.d1 span{
display: block;width: 20px;height: 20px;position: absolute;border-right:1px dashed #999;border-bottom:1px dashed #999;transform: rotate(45deg);bottom: -10px;left: 50%;margin-left:-15px;background: #fff;z-index: 99;
}
回答2:可以考慮用clip-path
回答3:用Border畫就行
p:after{ content:’’;border:20px solid transparent;border-top-color:#fff;position:absolute;left:50%;margin-left:-20px;width:0;}回答4:
利用微元素:after{content:‘’;with:0;height:0;boreder-left:20px dotted transparent;border-right:20px dotted transparent;border-bottom:40px dotted #ddd;position:absolute;bottom:0;…(自己精確一下定位樣式之類的,手機打的可能中英文標點符號混用,見諒)
}
回答5:利用偽類就好了
相關文章:
1. javascript - 原生JS和jQuety關于設置圖片輪播定時器問題2. mysql - 在下剛入門sql 關于sql的語法詢問3. 請問寫好python模塊以后,文檔怎么寫?4. html5 - 最近在自學react 求一個react表單提交的例子5. java - 新人有一個問題想問問大家,weex怎么動態修改控件高度6. javascript - jq 上傳圖片成功后添加一個新的上傳框時出現問題7. 老師您好!我有一個問題、8. angular.js - 在終端中用yeoman啟用angular-generator報錯,求解?9. 我和老師的代碼對照了幾遍沒發現問題,但是瀏覽器打開就有問題了,求解10. javascript - uc、qq、搜狗 以上三個手機瀏覽器判斷移動端的js代碼不執行
