我試圖在 div 的右側剪掉一個凹邊（最終制作一個彎曲的側邊欄）。我一直在努力使用 CSS 來實作這一點，到目前為止，我得到的最接近的是使用徑向漸變，就像這樣
uj5u.com熱心網友回復：
下面的代碼可能對您使用 background-image 屬性的情況有所幫助。
div {
height: 200px;
width: 200px;
background-color: green;
background-image: radial-gradient(45% 75% at 100% 50%, red 75%, transparent 75%);
}
您也可以使用如下所示的剪輯路徑屬性，但曲率可能需要更多點才能像完美曲線一樣
clip-path: polygon(50% 0%, 100% 0, 84% 36%, 84% 65%, 100% 100%, 50% 100%, 0 100%, 0% 70%, 0% 35%, 0 0);
檢查小提琴，看看它是如何作業的
uj5u.com熱心網友回復：
您可以嘗試使用剪切路徑和諸如https://bennettfeely.com/clippy/之類的東西，但我認為它不會達到您想要的效果。您最好的選擇可能是將影像創建為背景，然后根據您的使用方式使用 display flex 或 fixed。或者，如果您希望內容遵循形狀，甚至可能是兩者的組合，但不確定會如何實作。
html, body {margin: 0; padding: 0;}
section {
display: flex;
}
nav {
height: 100vh;
width: 20vw;
background-image: url(https://i.postimg.cc/vHC8KpjC/test.png);
background-size: 100% 100%;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}<section>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<main>Main content</main>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/419630.html
標籤：