Question

我试图设计如下图像，仍然没有得到结果，请帮助我。任何帮助将不胜感激

<!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>

Answer 1

使用@Krusader的评论，您可以添加position：relative;到＃rcorners1。然后使用以下CSS添加伪元素（:: after）：

#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%;
}

希望这有帮助。

Answer 2

这会有帮助::

#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;
}

Answer 3

伪元素的不同解决方案是使用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>

Answer 4

这是很多种形状。你可以从中获取想法。 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>

Answer 5

	#content {
  		border: 1px solid blue;
  		width : 400px;
  		height :  200px;
  		position: relative;
  		overflow: hidden;
  	}

  	#rconer-big,
  	#rconer-small {
  		display: inline-block;
  		width : 200px;
  		height : 100px;
  		border-top-right-radius: 50px;
  		border-bottom-right-radius: 50px;
  		margin : 0;
  	}

  	#rconer-big {
  		background-color: skyblue;
  	}


  	#rconer-small {
  		background-color: blue;
  		position: absolute;
  		top : 0;
  		left : -190px;
  	}

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

使用css的弯曲的盒子

5 个答案: