我知道有些人可以用 CSS 绘制任何东西。我不知道如何制作这个形状。
![1]](/image/MWN2k.png)
这是我目前的情况
#adobe {
height: 250px;
left: 50%;
overflow: hidden;
margin: -125px 0 0 -146px;
top: 25%;
width: 350px;
}
.adobe1 {
background: #db2027 none repeat scroll 0 0;
box-shadow: 4px 13px 14px -14px #eee inset;
height: 203px;
left: 10px;
top: 98px;
transform: skewX(-20deg);
width: 75px;
z-index: 999;
}
.adobe2 {
background: #404140 none repeat scroll 0 0;
height: 259px;
left: 210px;
top: 36px;
transform: skewX(19deg);
width: 75px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
z-index: 999;
}
.adobe3 {
background: #db2027 none repeat scroll 0 0;
height: 68px;
left: 80px;
top: 125px;
transform: skewX(-10deg);
width: 93px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
}
.adobe4 {
background: #404140 none repeat scroll 0 0;
height: 59px;
left: 57px;
top: 36px;
transform: skewX(-15deg);
width: 146px;
-moz-box-shadow: inset 0 0 3px #eee;
-webkit-box-shadow: inset 0 0 3px #eee;
box-shadow: inset 0 0 3px #eee;
}
.icon,
.icon * {
display: block;
position: absolute;
}
.icon,
.icon * {
display: block;
position: absolute;
}
.icon {
top: 35% !important;
}
.half-circle {
width: 350px !important;
height: 334px !important;
background-color: ;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: 20px solid #db2027;
border-bottom: 20px solid transparent !important;
border-right: 20px solid #db2027 !important;
transform: rotate(-8deg);
}
.half-circle2 {
left: 47px;
right: 31px;
top: -1px;
transform: rotate(9deg);
}
.two {
left: 47px;
right: 31px;
top: -1px;
transform: rotate(9deg);
border-bottom: 20px solid #000 !important;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
width: 350px !important;
height: 334px !important;
background-color: ;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border: 20px solid transparent;
border-bottom: 20px solid #000 !important;
border-right: 20px solid transparent !important;
}<div id="adobe" class="icon half-circle test">
<div class="two">
<div class="half-circle2">
<div class="adobe1"></div>
<div class="adobe2"></div>
<div class="adobe3"></div>
<div class="adobe4"></div>
</div>
</div>
</div>最佳答案
给你..!!需要进行一些微调，我认为您可以根据自己的设计进行调整。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.logo-container{
position: relative;
width: 184px;
height: 184px;
overflow: hidden;
border-radius: 50%;
}
.logo-outer-circle{
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border: 12px solid #db2027;
border-bottom: 12px solid #404140 !important;
border-right: 12px solid #db2027 !important;
width: 160px;
height: 160px;
/*border-radius: 50%;*/
/*overflow: hidden;*/
position: relative;
}
.red-top{
position: absolute;
width: 32px;
height: 90px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #db2027;
left: 20px;
top: 70px;
}
.red-top:before{
position: absolute;
content: '';
width: 21px;
height: 4px;
background-color: #e55a60;
top: 5px;
left: 6px;
}
.red-right{
position: absolute;
width: 60px;
height: 32px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #db2027;
left: 25px;
top: 95px;
}
.red-right:before{
position: absolute;
content: '';
width: 4px;
height: 58px;
background-color: #e55a60;
top: -18px;
}
.grey-top{
position: absolute;
width: 32px;
height: 160px;
-webkit-transform: skew(15deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
background: #404140;
right: 30px;
top: 25px;
}
.grey-top:before{
position: absolute;
content: '';
width: 4px;
height: 117px;
background-color: #4f4f4f;
top: 3px;
left: 5px;
}
.grey-left{
position: absolute;
width: 65px;
height: 32px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
background: #404140;
left: 30px;
top: 25px;
}
.grey-left:before{
position: absolute;
content: '';
width: 4px;
height: 26px;
background-color: #4f4f4f;
top: 3px;
left: 5px;
}
.divider-left{
position: absolute;
content: '';
width: 10px;
height: 20px;
background-color: #fff;
top: 150px;
left: 40px;
-webkit-transform: skew(-15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
}
.divider-right{
position: absolute;
content: '';
width: 10px;
height: 27px;
background-color: #fff;
top: 125px;
right: 11px;
-webkit-transform: skew(15deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
}
</style>
</head>
<body>
<div class="logo-container">
<div class="logo-outer-circle">
<div class="red-top"></div>
<div class="red-right"></div>
<div class="divider-left"></div>
<div class="grey-top"></div>
<div class="grey-left"></div>
<div class="divider-right"></div>
</div>
</div>
</body>
</html>关于CSS A 用圆圈包围并发光，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41436028/