我想要获得这样的形状: 到目前为止,我有this。有没有办法使用CSS获得此效果?我认为负半径可能会起作用。
div {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
min-width: 200px;
border-radius:10% / 70%;
background-color: red;
}
<div>
Board
</div>
答案 0 :(得分:9)
我喜欢这样的东西,因为我总是乱搞这样的东西。所以这就是我要做的。使用:before
和:after
我们可以创建此形状,我们使用它们创建一个形状,使其位于div
之上,颜色与背景相同。这将使它看起来像你想要的形状。
使:before
和:after
变大或变小以获得所需尺寸(更改宽度和高度)。
div {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
min-width: 200px;
border-radius: 20px;
background-color: red;
position: relative;
}
div:before,
div:after {
content: "";
display: block;
width: 96%;
height: 20px;
border-radius: 50%;
background: #fff;
position: absolute;
margin: auto;
}
div:before {
top: -17px;
left: 0;
right: 0;
}
div:after {
bottom: -17px;
left: 0;
right: 0;
}
&#13;
<div>Board</div>
&#13;
答案 1 :(得分:1)
正如我在评论中所说,你需要从板的顶部和底部切掉一些木头。 @Ruddy的董事会看起来好多了。
我使用了那些超高半径值,因为它们在板和滑雪板上的实际测量方式。使用滑雪板规格,您实际上可以实现相同的外观/形状。
关于纯CSS的问题(当然是调整数字)。
但是如果你需要它是一个半透明的物体放在(彩色)背景上,这样你就不能使用白色橡皮擦,你最好使用HTML画布和一个简单的JS。
div {
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
min-width: 200px;
border-radius:10% / 70%;
background-color: red;
}
div:before, div:after {
content: "";
background-color: white;
width: 800px;
height: 800px;
display: block;
border-radius: 800px;
position: absolute;
}
div:before {
margin: -804px 0 0 -307px;
}
div:after {
margin: 4px 0 0 -307px;
}
&#13;
<div>
Board
</div>
&#13;
答案 2 :(得分:0)
#a{position:relative;height:50px;width:100px;background-color:green;border-radius:50%;}
#b{position:relative;top:-48px;left:50px;height:46px;width:100px;background-color:green;}
#c{position:relative;top:-96px;left:100px;height:50px;width:100px;background-color:green;border-radius:50%;}
&#13;
<div id="a"></div><div id="b"></div><div id="c"></div>
&#13;
答案 3 :(得分:0)
那样的东西?
#board-cont{
position: relative;
overflow: hidden;
}
#board-cont .board{
display: inline-block;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
width: 190px;
height: 30px;
border-radius:15% / 70%;
background-color: red;
}
#board-cont .border-top{
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border-top: 3.4482758620689653px solid #ffffff;
border-bottom: 3.4482758620689653px solid #ffffff;
border-left: 100px solid #ffffff;
border-right: 100px solid #ffffff;
border-radius: 100px / 3.4482758620689653px;
left: 0px;
top: -4px;
}
#board-cont .border-bottom{
position: absolute;
display: inline-block;
width: 0;
height: 0;
line-height: 0;
border-top: 3.4482758620689653px solid #ffffff;
border-bottom: 3.4482758620689653px solid #ffffff;
border-left: 100px solid #ffffff;
border-right: 100px solid #ffffff;
border-radius: 100px / 3.4482758620689653px;
left: 0px;
bottom: 0px;
}
<div id="board-cont">
<div class="border-top"></div>
<div class="border-bottom"></div>
<div class="board"></div>
</div>
答案 4 :(得分:0)
在CSS中实现这一过程将是一个漫长的过程。您可以改用SVG:
<svg height="150" width="500">
<ellipse style="fill:lime" ry="50" rx="109" cy="49" cx="220" />
<ellipse style="fill:white" ry="73" rx="270" cy="-51" cx="214" />
<ellipse style="fill:white" ry="73" rx="270" cy="151" cx="214" />
</svg>
&#13;