复杂 CSS 形状
Complex CSS Shape
我需要一些 CSS 帮助。很难解释,但是看片段我需要黑色部分没有红色。
我用了两个元素,但应该可以用一个...
.q-rounder {
background: #222;
width: 15px;
height: 15px;
}
.quarter-circle {
width: 15px;
height: 15px;
background: red;
border-radius: 100px 0 0 0;
-moz-border-radius: 100px 0 0 0;
-webkit-border-radius: 100px 0 0 0;
}
<div class="q-rounder">
<div class="quarter-circle"></div>
</div>
(fiddle)
使用径向渐变作为背景
.q-rounder {
background:
radial-gradient(farthest-side at bottom right,transparent 94%, #222);
width: 15px;
height: 15px;
}
<div class="q-rounder">
</div>
at
的另一种语法得到更好的支持 ()
.q-rounder {
background:
radial-gradient(farthest-side,transparent 94%, #222) top left/200% 200%;
width: 15px;
height: 15px;
}
<div class="q-rounder">
</div>
如果您可以使用纯色背景,也许这适合您?
基本上,之前的元素位于一个矩形的后面,该矩形具有边框半径和纯色背景色。
每个浏览器和版本都支持。
.q-rounder {
position: relative;
background: white;
width: 15px;
height: 15px;
border-radius: 100px 0 0 0;
}
.q-rounder:before {
position: absolute;
left: 0;
top: 0;
width: 15px;
height: 15px;
background: black;
content: "";
z-index: -1;
}
<div class="q-rounder">
</div>
我需要一些 CSS 帮助。很难解释,但是看片段我需要黑色部分没有红色。
我用了两个元素,但应该可以用一个...
.q-rounder {
background: #222;
width: 15px;
height: 15px;
}
.quarter-circle {
width: 15px;
height: 15px;
background: red;
border-radius: 100px 0 0 0;
-moz-border-radius: 100px 0 0 0;
-webkit-border-radius: 100px 0 0 0;
}
<div class="q-rounder">
<div class="quarter-circle"></div>
</div>
(fiddle)
使用径向渐变作为背景
.q-rounder {
background:
radial-gradient(farthest-side at bottom right,transparent 94%, #222);
width: 15px;
height: 15px;
}
<div class="q-rounder">
</div>
at
的另一种语法得到更好的支持 (
.q-rounder {
background:
radial-gradient(farthest-side,transparent 94%, #222) top left/200% 200%;
width: 15px;
height: 15px;
}
<div class="q-rounder">
</div>
如果您可以使用纯色背景,也许这适合您?
基本上,之前的元素位于一个矩形的后面,该矩形具有边框半径和纯色背景色。
每个浏览器和版本都支持。
.q-rounder {
position: relative;
background: white;
width: 15px;
height: 15px;
border-radius: 100px 0 0 0;
}
.q-rounder:before {
position: absolute;
left: 0;
top: 0;
width: 15px;
height: 15px;
background: black;
content: "";
z-index: -1;
}
<div class="q-rounder">
</div>