弯曲的盒子使用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>
答
使用@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%;
}
希望这有助于。
答
请问这有助于::
#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;
}
答
这里有许多种形状。你可以从中获得想法。 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>
答
不同的解决伪元素的人会使用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>
答
\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>
下面是一些代码,开始用'边界半径: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