前端 - 能不能用 CSS3 畫出以下圖形?感謝!
問題描述
圖形如下,就是一個大闊號,箭頭向下。但非前端專業,做的時候自己無從下手,希望高手指點。謝謝。
如果不能,那只能用圖片了。用圖片無法方便控制長度,比較麻煩。
問題解答
回答1:http://codepen.io/lizzz0523/pen/Xmqzxw
回答2:@lizzz_led 的回答很棒。
我也來貢獻個答案吧。主要是減少輸入的計算變量,只需考慮修復 .quote 的高度以及圓角的寬度
<p class='quote'><p></p></p> <style type='text/css'> .quote {position: relative;width: 100%; /* any width */height: 40px;/* fix zero height */ } .quote::before, .quote::after, .quote ::before, .quote ::after {content: ’’;display: block;position: absolute;width: calc(50% - 20px);height: 20px;border-style: solid;border-color: #000;border-width: 0; } .quote ::before, .quote ::after {top: 0;border-bottom-width: 1px; } .quote::before, .quote::after {top: 20px;border-top-width: 1px; } .quote ::before {left: 0;border-bottom-left-radius: 20px; } .quote ::after {right: 0;border-bottom-right-radius: 20px; } .quote::before {left: 20px;border-top-right-radius: 20px; } .quote::after {right: 20px;border-top-left-radius: 20px; } </style>回答3:
不能, 能用 canvas 實現, 畫2跟賽貝爾曲線就行了。建議還是用圖片吧。
回答4:還是用圖片吧。。。
回答5:用圖片吧,居中顯示, 兩側的上翹部分用before,after調試一下吧. 這樣也就最大程度上適應了吧
回答6:即使用圖片,拉長變形了,也不難看吧
回答7:是我孤陋寡聞,ccs3什么鬼,只用過css3
相關文章:
1. javascript - 關于定時器 與 防止連續點擊 問題2. javascript - 求助關于js正則問題3. objective-c - ios百度地圖定位問題4. javascript - 求助這種功能有什么好點的插件?5. javascript - js 有什么優雅的辦法實現在同時打開的兩個標簽頁間相互通信?6. 為何 localStorage、sessionStorage 屬于html5的范疇,但是為何 IE8卻支持?7. html5 - rudy編譯sass的時候有中文報錯8. html - css 如何添加這種邊框?9. javascript - node.js服務端渲染解疑10. 微信開放平臺 - Android調用微信分享不顯示
