CSS 서클과 광선으로 둘러 쌓인

-1

나는 어떤 사람들은 CSS로 무엇이든 그릴 수 있다는 것을 알고있다. 이 모양을 만드는 방법을 알아낼 수 없습니다.CSS 서클과 광선으로 둘러 쌓인

이것은 내가 지금까지 지금처럼 당신이 가서 여기

#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

감사합니다 deepak 반디 –

아무런 문제가 없습니다. Sumer .. :) –

좋은 점과 자신의 포트폴리오 사이트에 대한 인상 깊은 @DeepakBandi 좋은 직장 (Y) – acmsohail

답변

관련 문제