Search code examples
csscss-shapes

CSS A surounded with a circle and glow

I know some people are able to draw anything with css. I can't figure out how to make this shape.

1]

This is what I have as far as now

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

Solution

  • Here you go..!! Little tweaks are required, I think you can make it according to your design.

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