css a 圆形,CSS A圆圈和发光

在这里你去.. !!小调整是必需的，我认为你可以根据你的设计。

.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);

}