弯曲的盒子使用css

我试图设计像下面的图像，仍然没有得到结果，请帮助我。任何帮助，将不胜感激弯曲的盒子使用css

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
#rcorners1 { 
 
    border-radius: 10px 90px 90px 10px/8% 100% 100% 8%; 
 
    background: #18b1a0; 
 
    padding: 20px; 
 
    width: 200px; 
 
    height: 150px;  
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<p id="rcorners1">Rounded corners!</p> 
 
</body> 
 
</html>

来源

2017-10-17 Ganesh Putta

下面是一些代码，开始用'边界半径：10px的90像素90像素10px的/ 8％100％ 100％8％;'（https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius） – Krusader

@Krusader谢谢你，ih大家更新你的代码，但我需要一些黑色的左侧，如图所示。 –

使用'pseudo-element'（'：before'或'：after'），并从那里取出 – UncaughtTypeError

使用@Krusader的评论，你可以添加位置：相对;到＃rcorners1。然后用下面的CSS添加伪元素（::后）：

#rcorners1::after { 
content: ""; 
position: absolute; 
top: 10%; 
left: -15px; 
width: 30px; 
height: 80%; 
background-color: green; 
border-radius: 100%; 
}

所以完整的CSS是这样的：

#rcorners1 { 
position: relative; 
background: #18b1a0; 
padding: 20px; 
width: 200px; 
height: 150px; 
border-radius: 10px 90px 90px 10px/8% 100% 100% 8%; 
overflow: hidden; 
} 
#rcorners1::after { 
content: ""; 
position: absolute; 
top: 10%; 
left: -15px; 
width: 30px; 
height: 80%; 
background-color: green; 
border-radius: 100%; 
}

希望这有助于。

来源

2017-10-17 08:04:41

请问这有助于::

#rcorners1 { 
    border-radius: 10px ; 
    background: #18b1a0; 
    padding: 20px; 
    width: 200px; 
    height: 150px; 
    position: relative; 
} 

#rcorners1:after { 
    content: ''; 
    background: #18b1a0; 
    padding: 20px; 
    width: 10px; 
    height: 150px; 
    position: absolute; 
    right: -20px; 
    z-index: -1; 
    top: 0; 
    border-radius: 0px 36px 36px 0; 
}

来源

2017-10-17 08:08:55 aashi

这里有许多种形状。你可以从中获得想法。 https://css-tricks.com/examples/ShapesOfCSS/

，我已经更新代码

#rcorners1:after { 
 

 
    bottom: 10px; 
 
content: ""; 
 
position: absolute; 
 
top: 10px; 
 
left: 0; 
 
width: 50px; 
 
left: -35px; 
 
background-color: #098a7c; 
 
border-radius: 70px 100% 100% 70px; 
 
} 
 

 
#rcorners1 { 
 
position: relative; 
 
background: #18b1a0; 
 
padding: 20px; 
 
width: 200px; 
 
overflow: hidden; 
 
height: 150px; 
 
border-radius: 10px 130px 130px 10px/10px 100% 100% 10px; 
 
}

<p id="rcorners1">Rounded corners!</p>

来源

2017-10-17 09:02:33 Kumar

不同的解决伪元素的人会使用radial-gradient（由Krusader in the comments推荐）。您可以合并两个不同的radial-gradient作为背景图像：一个用于左侧较暗的阴影，另一个用于右侧边界上的曲线。您可能需要在透明度结束时播放一点点，以避免太尖锐也不太模糊。

事情是这样的：

@import url('https://fonts.googleapis.com/css?family=Inconsolata'); 
 

 
.box { 
 
    width: 190px; 
 
    height: 109px; 
 
    box-sizing: border-box; 
 
    font-family: Inconsolata; 
 
    font-size: 18px; 
 
    background-image: radial-gradient(circle at -52%, rgba(0,0,0,0.25) 36%, transparent 37%), 
 
        radial-gradient(circle at 29%, #18b1a0 88%, transparent 89%); 
 
    border-radius: 6px 25px 25px 6px; 
 
    color: white; 
 
    text-align:center; 
 
    padding-top:36px; 
 
}

<div class="box">SECRET<br/>CHAMBER</div>

来源

2017-10-18 01:45:23

\t #content { 
 
    \t \t border: 1px solid blue; 
 
    \t \t width : 400px; 
 
    \t \t height : 200px; 
 
    \t \t position: relative; 
 
    \t \t overflow: hidden; 
 
    \t } 
 

 
    \t #rconer-big, 
 
    \t #rconer-small { 
 
    \t \t display: inline-block; 
 
    \t \t width : 200px; 
 
    \t \t height : 100px; 
 
    \t \t border-top-right-radius: 50px; 
 
    \t \t border-bottom-right-radius: 50px; 
 
    \t \t margin : 0; 
 
    \t } 
 

 
    \t #rconer-big { 
 
    \t \t background-color: skyblue; 
 
    \t } 
 

 

 
    \t #rconer-small { 
 
    \t \t background-color: blue; 
 
    \t \t position: absolute; 
 
    \t \t top : 0; 
 
    \t \t left : -190px; 
 
    \t }

<div id="content"> 
 
\t \t <p id="rconer-big"></p> 
 
\t \t <p id="rconer-small"></p> 
 
</div>

来源

2017-10-18 14:39:13 WAEX

弯曲的盒子使用css

回答

相关问题