CSS A圓圈和發光

-1

我知道有些人可以用CSS來繪製任何東西。我無法弄清楚如何製作這種形狀。CSS A圓圈和發光

這是我必須儘可能現在

#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>

來源

2017-01-03 Sumer Parveen

你應該在這裏分享你的CSS代碼，你試過。 –

你是否檢查上面的鏈接代碼 –

嘿蘇美爾你很好地嘗試..很好:) – Sharmila

在這裏你去.. !!小調整是必需的，我認爲你可以根據你的設計。

<!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; 
 
      \t height: 90px; 
 
      \t -webkit-transform: skew(-15deg); 
 
      \t -moz-transform: skew(-15deg); 
 
      \t -o-transform: skew(-15deg); 
 
      \t 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); 
 
      \t -moz-transform: skew(-15deg); 
 
      \t -o-transform: skew(-15deg); 
 
      \t 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; 
 
      \t height: 160px; 
 
      \t -webkit-transform: skew(15deg); 
 
      \t -moz-transform: skew(15deg); 
 
      \t -o-transform: skew(15deg); 
 
      \t 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); 
 
      \t -moz-transform: skew(-15deg); 
 
      \t -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>

來源

2017-01-03 05:41:04

謝謝迪帕克Bandi –

沒問題Sumer .. :) –

好的一個和你的投資組合網站留下深刻印象@DeepakBandi幹得好（Y） – acmsohail

CSS A圓圈和發光

回答

相關問題