圖形如下，就是一個大闊號，箭頭向下。但非前端專業，做的時候自己無從下手，希望高手指點。謝謝。如果不能，那只能用圖片了。用圖片無法方便控制長度，比較麻煩。
2 回答
jeck貓
TA貢獻1909條經驗 獲得超7個贊
我也來貢獻個答案吧。主要是減少輸入的計算變量，只需考慮修復 .quote 的高度以及圓角的寬度
<div class="quote"><div></div></div>
<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>
- 2 回答
- 0 關注
- 764 瀏覽
添加回答
舉報
0/150
提交
取消