如何在CSS邊框形狀中創建平滑邊緣？

-1

這是我的屏幕截圖，您可以在左上方看到模糊的邊緣，我是CSS新手，請爲此問題提供解決方案。如何在CSS邊框形狀中創建平滑邊緣？

.shape { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #9966ff; 
 
    outline: 1px solid transparent; 
 
    box-shadow: 0 0 1px rgba(255, 255, 255, 0); 
 
} 
 
.shape:after { 
 
    content: ''; 
 
    border-right: 1500px solid rgba(0, 0, 0, 0); 
 
    border-top: 250px solid rgba(255, 255, 255, 1); 
 
    border-left: 1500px solid rgba(255, 255, 255, 1); 
 
    float: right; 
 
}

<div class="shape"></div>

來源

2016-08-30 Aravind

如何創建平滑的邊緣？ – Aravind

請提供你的代碼？ – aswathy

– Aravind

內部形狀使用樣式「邊界半徑：15px的;」

來源

2016-08-30 06:31:28 divya

還是有些模糊 – Aravind

我需要完美的圖片（100％平滑）線 – Aravind

通過更改像素並根據您的要求進行調整。 – divya

.shape { 
 
    position: absolute; 
 
    width: 100%; 
 
    /*height: 100%;*/ 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #9966ff; 
 
    outline: 1px solid transparent; 
 
    box-shadow: 0 0 1px rgba(255, 255, 255, 0); 
 
    border-radius: 56px; 
 
} 
 
.shape:after { 
 
    content: ''; 
 
    border-right: 1500px solid rgba(0, 0, 0, 0); 
 
    border-top: 340px solid rgba(255, 255, 255, 1); 
 
    border-left: 1500px solid rgba(255, 255, 255, 1); 
 
    float: right; 
 
}

<div class="shape"></div>

來源

2016-08-30 06:44:55 aswathy

但邊界半徑改變形狀。 – Aravind

我需要的形狀保持不變 – Aravind

如何在CSS邊框形狀中創建平滑邊緣？

回答

相關問題