的CSS廣場手鐲形狀事業部

-2

任何人都可以幫我做這個div像方形手鐲形狀的CSS廣場手鐲形狀事業部

這樣

來源

2017-08-13 Sanjeev Kumar

你試過了嗎？你有代碼顯示嗎？ –

我嘗試使用邊框半徑，但它不工作，我需要。我希望我的圓角半徑相同的藍色邊框形狀 –

<！DOCTYPE HTML！>

–

您可以使用僞元素分層上述兩個彼此的形狀像這樣的：

.x { 
 
position: relative; 
 
left: 50px; 
 
top: 50px; 
 
    width: 260px; 
 
    height: 240px; 
 
    border-top-left-radius: 15px 130px; 
 
    border-top-right-radius: 15px 130px; 
 
    border-bottom-left-radius: 15px 130px; 
 
    border-bottom-right-radius: 15px 130px; 
 
    border: 30px solid #af8; 
 
} 
 
.x:after { 
 
content: ''; 
 
position: absolute; 
 
left: -20px; 
 
top: -40px; 
 
width: 240px; 
 
height: 260px; 
 
    border-top-left-radius: 130px 15px; 
 
    border-top-right-radius: 130px 15px; 
 
    border-bottom-left-radius: 130px 15px; 
 
    border-bottom-right-radius: 130px 15px; 
 
    border: 30px solid #af8; 
 
}

<div class="x"></div>

如果你想在內部形狀類似圓角太大，你可以把另一個元素加上一個額外的僞元素在它的上面：

.x { 
 
    position: relative; 
 
    left: 50px; 
 
    top: 50px; 
 
    width: 260px; 
 
    height: 240px; 
 
    border-top-left-radius: 15px 130px; 
 
    border-top-right-radius: 15px 130px; 
 
    border-bottom-left-radius: 15px 130px; 
 
    border-bottom-right-radius: 15px 130px; 
 
    border: 30px solid #af8; 
 
} 
 

 
.x:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: -20px; 
 
    top: -40px; 
 
    width: 240px; 
 
    height: 260px; 
 
    border-top-left-radius: 130px 15px; 
 
    border-top-right-radius: 130px 15px; 
 
    border-bottom-left-radius: 130px 15px; 
 
    border-bottom-right-radius: 130px 15px; 
 
    border: 30px solid #af8; 
 
} 
 

 
.y { 
 
    position: absolute; 
 
    z-index: 10; 
 
    left: 5px; 
 
    top: -10px; 
 
    width: 250px; 
 
    height: 260px; 
 
    border-top-left-radius: 130px 10px; 
 
    border-top-right-radius: 130px 10px; 
 
    border-bottom-left-radius: 130px 10px; 
 
    border-bottom-right-radius: 130px 10px; 
 
    border: none; 
 
    background: #eee; 
 
} 
 
.y:after { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: 10; 
 
    left: -5px; 
 
    top: 5px; 
 
    width: 260px; 
 
    height: 250px; 
 
    border-top-left-radius: 10px 130px; 
 
    border-top-right-radius: 10px 130px; 
 
    border-bottom-left-radius: 10px 130px; 
 
    border-bottom-right-radius: 10px 130px; 
 
    border: none; 
 
    background: #eee; 
 
}

<div class="x"> 
 
    <div class="y"></div> 
 
</div>

來源

2017-08-13 12:22:02 Johannes

都能跟得上，這是不是老兄檢查曲線的形狀有點不同，它就像方形手鐲其方，但雙方都有點曲線。 –

請注意我改變的答案 – Johannes

這就是我需要的非常感謝你爲你+1 –

我不知道，這是你想要的，但你試過剪輯路徑？你可以從內部和角落切割（使用路徑或svg）。類似的東西：

-webkit-clip-path: polygon(25% 75%, 25% 25%, 75% 25%, 75% 75%, 85% 100%, 100% 85%, 100% 15%, 85% 0%, 15% 0%, 0% 15%, 0% 85%, 15% 100%, 85% 100%, 75% 75%); 
clip-path: polygon(25% 75%, 25% 25%, 75% 25%, 75% 75%, 85% 100%, 100% 85%, 100% 15%, 85% 0%, 15% 0%, 0% 15%, 0% 85%, 15% 100%, 85% 100%, 75% 75%);

來源

2017-08-13 13:34:08

的CSS廣場手鐲形狀事業部

回答

相關問題