如何用緩坡傾斜角？

我正在尋找切割div的底部和左下角。像這樣http://prnt.sc/e93lif 如何用緩坡傾斜角？

嘗試幫助clip-path 但認爲這不是一個好的解決方案。

#clip{ 
 
     width: 56px; 
 
     height: 58.1px; 
 
     border-radius: 8px; 
 
     background-color: rgb(107, 170, 42); 
 
     box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.15), 0 1px 6px 0 rgba(0, 0, 0, 0.09); 
 
    }

<div id="clip"></div>

來源

2017-02-15 fasenberg

如果你想重新創建圖像，我會用一個SVG。 – 4castle

可以使用僞元素來使用傾斜來完成角度位。

#clip { 
 
    position: relative; 
 
    width: 56px; 
 
    height: 40px; 
 
} 
 
#clip, #clip:before { 
 
    background-color: #6baa2a; 
 
    border-radius: 8px; 
 
} 
 
#clip:before { 
 
    position: absolute; 
 
    content: ''; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    height: 32px; 
 
    -webkit-transform: translateY(50%) skewY(8deg); 
 
    transform: translateY(50%) skewY(8deg); 
 
}

<div id="clip"></div>

同樣，你可以使用SVG：https://i.koya.io/GastelloIcon.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 269.5"><path d="M256 248c0 13.2-10.7 22.7-23.8 21L23.8 243C10.7 241.3 0 229.2 0 216V24C0 10.8 10.8 0 24 0h208c13.2 0 24 10.8 24 24V248z"/></svg>

來源

2017-02-15 16:18:43 Skylark

可以設置半徑分別

div { 
width: 56px; 
    height: 58.1px; 
    border-radius: 8px 8px 8px 28px; 
    background-color: rgb(107, 170, 42); 
    box-shadow: 0 2px 32px 0 rgba(0, 0, 0, 0.15), 0 1px 6px 0 rgba(0, 0, 0, 0.09); 
}

你會得到切角，也不會完全像你的形象。

來源

2017-02-15 16:18:19 jjj

喜歡這個？ https://jsfiddle.net/b5t3x66y/1/

試試這個：

div{ 
    width: 120px; 
    height: 120px; 
    border-right: 200px solid #6ba92c; 
    border-bottom: 50px solid transparent; 
    border-radius: 2px; 
    background: transparent; 
}

和

<div></div>

來源

2017-02-15 16:28:11 Lissy

你不能用這種方法四捨五入。 – Skylark

如何用緩坡傾斜角？

回答

相關問題