<img>顯示 SVG 的 和之間有一條灰線<div>。這是屏幕截圖和部分代碼。.svg{ width: 100%; height: auto; display: block;}.title-container{ // center the title into the container display: flex; width: 100%; justify-content: center; background-color: $white; padding-top: 10px;}<img src="assets/oblique.svg" class="svg"/><div class="title-container"> <a href="/" >Example</a></div>我已經嘗試過的我已經嘗試將邊距、填充和邊框設置為 0px，但不起作用。我已經嘗試將邊距、填充或邊框設置為 -1px，但它會產生溢出。
1 回答
小唯快跑啊
TA貢獻1863條經驗 獲得超2個贊
看起來您正在嘗試在 div 上制作斜頂。
您可能喜歡另一種沒有 SVG 的方法。
使用border-image：
body {
background: #15100e
}
.title-container {
display: flex;
width: 100%;
justify-content: center;
background-color: white;
background-clip:padding-box;
padding-top: 10px;
border-top: solid 50px;
border-image: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #fff 50%) 100% 0 0 0 / 50px 0 0 0
}
<div class="title-container">
<a href="/">Example</a>
</div>
- 1 回答
- 0 關注
- 110 瀏覽
添加回答
舉報
0/150
提交
取消