前端 - 能不能用 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. 我的html頁面一提交，網頁便顯示出了我的php代碼，求問是什么原因？2. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？3. node.js - node 客戶端socket一直報錯Error: read ECONNRESET，用php的socket沒問題哈。。4. django - 后臺返回的json數據經過Base64加密，獲取時用python如何解密~！5. 老哥們求助啊6. docker 17.03 怎么配置 registry mirror ?7. tp6表單令牌8. node.js - gulp文件監聽的問題9. 如何解決docker宿主機無法訪問容器中的服務？10. javascript - canvas 可以實現 PS 魔法橡皮擦的功能嗎？
網公網安備