凹形边界
Concave shape boundary
我正在尝试在 CSS/SVG 中创建此形状:
问题是白色部分需要透明。我如何在 CSS/SVG 中做到这一点?我还需要将鼠标悬停在形状上。
#shape {
height: 400px;
width: 400px;
background: black;
overflow: hidden;
}
#circle1,
#circle2,
#circle3,
#circle4 {
background: white;
height: 800px;
width: 800px;
border-radius: 50%;
position: relative;
}
#circle1 {
top: -200px;
right: -340px;
}
#circle2 {
top: -1000px;
left: -740px;
}
#circle3 {
top: -2350px;
left: -200px;
}
#circle4 {
top: -2050px;
left: -200px;
}
#shape:hover {
background: red;
}
<div id="shape">
<div id="circle1">
</div>
<div id="circle2">
</div>
<div id="circle3">
</div>
<div id="circle4">
</div>
</div>
您可以使用 svg 二次贝塞尔曲线路径来创建这样的形状。
<svg version="1.1" height="400" width="400" viewBox="0 0 10 10">
<defs>
<style type="text/css">
path:hover {
fill: blue;
transition: 0.5s ease;
}
path {
transition: 0.5s ease;
}
</style>
</defs>
<path d="M0 0 Q5 3 10 0 7 5 10 10 5 7 0 10 3 5 0 0" stroke="none" fill="red" />
</svg>
这需要一些调整,但您可以使用类似的东西。
它使用两个元素(一个父元素和一个子元素)来生成您要查找的形状。这将适用于渐变背景,尽管由于生成方式的原因,命中测试会有些偏离。
.one {
height: 100px;
width: 100px;
margin: 100px;
position: relative;
overflow: hidden;
}
.two {
position: absolute;
top: 25%;
left: 25%;
height: 50%;
width: 50%;
background: red;
}
.one:before {
content: "";
position: absolute;
width: 100%;
left: 0%;
height: 50%;
top: -42%;
border-radius: 50%;
border-bottom: 30px solid red;
}
.two:before {
content: "";
position: absolute;
height: 200%;
top: -50%;
width: 100%;
left: -136%;
border-radius: 50%;
border-right: 30px solid red;
}
.two:after {
content: "";
position: absolute;
height: 200%;
top: -50%;
width: 100%;
right: -136%;
border-radius: 50%;
border-left: 30px solid red;
}
.one:after {
content: "";
position: absolute;
width: 100%;
left: 0%;
height: 50%;
bottom: -42%;
border-radius: 50%;
border-top: 30px solid red;
}
/*FOR DEMO ONLY*/
.one:hover:before{border-bottom-color:blue;}
.one:hover:after{border-top-color:blue;}
.one:hover .two{background:blue;}
.one:hover .two:before{border-right-color:blue;}
.one:hover .two:after{border-left-color:blue;}
.one,.two,.one:before,.one:after,.two:before,.two:after{transition:all 0.6s;}
html {
height: 100%;
background: rgb(79, 79, 79);
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}
<div class="one">
<div class="two"></div>
</div>
我正在尝试在 CSS/SVG 中创建此形状:
问题是白色部分需要透明。我如何在 CSS/SVG 中做到这一点?我还需要将鼠标悬停在形状上。
#shape {
height: 400px;
width: 400px;
background: black;
overflow: hidden;
}
#circle1,
#circle2,
#circle3,
#circle4 {
background: white;
height: 800px;
width: 800px;
border-radius: 50%;
position: relative;
}
#circle1 {
top: -200px;
right: -340px;
}
#circle2 {
top: -1000px;
left: -740px;
}
#circle3 {
top: -2350px;
left: -200px;
}
#circle4 {
top: -2050px;
left: -200px;
}
#shape:hover {
background: red;
}
<div id="shape">
<div id="circle1">
</div>
<div id="circle2">
</div>
<div id="circle3">
</div>
<div id="circle4">
</div>
</div>
您可以使用 svg 二次贝塞尔曲线路径来创建这样的形状。
<svg version="1.1" height="400" width="400" viewBox="0 0 10 10">
<defs>
<style type="text/css">
path:hover {
fill: blue;
transition: 0.5s ease;
}
path {
transition: 0.5s ease;
}
</style>
</defs>
<path d="M0 0 Q5 3 10 0 7 5 10 10 5 7 0 10 3 5 0 0" stroke="none" fill="red" />
</svg>
这需要一些调整,但您可以使用类似的东西。
它使用两个元素(一个父元素和一个子元素)来生成您要查找的形状。这将适用于渐变背景,尽管由于生成方式的原因,命中测试会有些偏离。
.one {
height: 100px;
width: 100px;
margin: 100px;
position: relative;
overflow: hidden;
}
.two {
position: absolute;
top: 25%;
left: 25%;
height: 50%;
width: 50%;
background: red;
}
.one:before {
content: "";
position: absolute;
width: 100%;
left: 0%;
height: 50%;
top: -42%;
border-radius: 50%;
border-bottom: 30px solid red;
}
.two:before {
content: "";
position: absolute;
height: 200%;
top: -50%;
width: 100%;
left: -136%;
border-radius: 50%;
border-right: 30px solid red;
}
.two:after {
content: "";
position: absolute;
height: 200%;
top: -50%;
width: 100%;
right: -136%;
border-radius: 50%;
border-left: 30px solid red;
}
.one:after {
content: "";
position: absolute;
width: 100%;
left: 0%;
height: 50%;
bottom: -42%;
border-radius: 50%;
border-top: 30px solid red;
}
/*FOR DEMO ONLY*/
.one:hover:before{border-bottom-color:blue;}
.one:hover:after{border-top-color:blue;}
.one:hover .two{background:blue;}
.one:hover .two:before{border-right-color:blue;}
.one:hover .two:after{border-left-color:blue;}
.one,.two,.one:before,.one:after,.two:before,.two:after{transition:all 0.6s;}
html {
height: 100%;
background: rgb(79, 79, 79);
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}
<div class="one">
<div class="two"></div>
</div>