简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

不言
不言앞으로
2018-11-29 15:23:334593검색

이 기사에서는 CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)을 소개합니다. 도움이 필요한 친구는 다음을 참조할 수 있으며, 내부 코드는 매우 상세합니다.

오늘 외국 웹사이트에서 순수 CSS로 그린 겉보기에는 단순하지만 매우 강력한 그래픽을 많이 보았습니다. 가장 단순한 직사각형, 원, 삼각형은 물론 다양한 음양 태극권도 있습니다. 작은 웹사이트 아이콘은 정말 강력해서 모든 사람과 공유하고 싶습니다.

정사각형(사각형)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#square{
    width: 100px;
    height: 100px;
    background: red;
    }

직사각형(직사각형)# 🎜🎜#

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#rectangle{
    width: 200px;
    height: 100px;
    background: red;
    }

원(원)# 🎜 🎜#

#circle{
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    }/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

타원형(타원형)

# 🎜 🎜 #

#oval{
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
    }/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */
CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)위쪽 삼각형

#triangle-up{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    }

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)아래쪽 삼각형(아래쪽)

#triangle-down{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    }

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)왼쪽 삼각형(왼쪽)

#🎜🎜 ##🎜 🎜#

#triangle-left{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
    }

오른쪽 삼각형

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#🎜 🎜#

#triangle-right{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
    }

#🎜 🎜# 왼쪽 위 삼각형(왼쪽 위)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#triangle-topleft{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
    }

오른쪽 위 삼각형(오른쪽 위) )

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#triangle-topright{
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
    }

왼쪽 하단 삼각형(왼쪽 하단)

# 🎜🎜 ## ## ## ## ## ## ## #####

#triangle-bottomleft{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
    }
#🎜🎜 ## 🎜🎜#삼각형 하단 오른쪽 (오른쪽 하단)##### 🎜🎜 #CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#triangle-bottomright{
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
    }

곡선꼬리화살(곡선꼬리화살)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함) 

#curvedarrow{
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  }
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  }


사다리꼴(사다리꼴)# # 🎜🎜#

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    }
CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

평행사변형(평행사변형)

#🎜🎜 ## 🎜## 🎜🎜#별(6점)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -o-transform: skew(20deg);
    background: red;
    }

#🎜🎜 #별(5점)(五角星)#🎜 🎜#

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#star-five{
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
  }
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
   }
#star-five:after{
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
   }

Pentagon(五边形)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
    }
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    border-color: transparent transparent red;
    }

Hexagon(六边形)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#hexagon {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
    }
#hexagon:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
    }
#hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px solid red;
    }

Octagon(八边形)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#octagon {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    }
#octagon:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 29px solid red;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    width: 42px;
    height: 0;
    }
#octagon:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 29px solid red;
    border-left: 29px solid #fff;
    border-right: 29px solid #fff;
    width: 42px;
    height: 0;
    }

Heart(心形)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#heart {
    position: relative;
    width: 100px;
    height: 90px;
    }
#heart:before,
#heart:after {
    position: absolute;
    content: "";
    left: 50px;
    top: 0;
    width: 50px;
    height: 80px;
    background: red;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
     }
#heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin :100% 100%;
    }

Infinity(无限符图形)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#infinity {
    position: relative;
    width: 212px;
    height: 100px;
    }
#infinity:before,
#infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    border: 20px solid red;
    -moz-border-radius: 50px 50px 0 50px;
    border-radius: 50px 50px 0 50px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }
#infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
    border-radius: 50px 50px 50px 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    }

Diamond Square(菱形)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#diamond {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    position: relative;
    top: -50px;
    }
#diamond:after {
    content: '';
    position: absolute;
    left: -50px;
    top: 50px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top-color: red;
    }

Diamond Shield（钻石盾牌）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#diamond-shield {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 20px solid red;
    position: relative;
    top: -50px;
    }
#diamond-shield:after {
    content: '';
    position: absolute;
    left: -50px; top: 20px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid red;
    }

Diamond Narrow

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#diamond-narrow {
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-bottom: 70px solid red;
    position: relative;
    top: -50px;
    }
#diamond-narrow:after {
    content: '';
    position: absolute;
    left: -50px; top: 70px;
    width: 0;
    height: 0;
    border: 50px solid transparent;
    border-top: 70px solid red;
    }

Cut Diamond(砖石形)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#cut-diamond {
    border-style: solid;
    border-color: transparent transparent red transparent;
    border-width: 0 25px 25px 25px;
    height: 0;
    width: 50px;
    position: relative;
    margin: 20px 0 50px 0;
    }
#cut-diamond:after {
    content: "";
    position: absolute;
    top: 25px;
    left: -25px;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: red transparent transparent transparent;
    border-width: 70px 50px 0 50px;
    }

Egg(鸡蛋)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius: 50%  50%  50%  50%  / 60%   60%   40%  40%;
   }

Pac-Man(吃豆人)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid red;
  border-left: 60px solid red;
  border-bottom: 60px solid red;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  }

Talk Bubble（聊天框）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#talkbubble{
   width: 120px;
   height: 80px;
   background: red;
   position: relative;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px;
   }
#talkbubble:before{
   content:"";
   position: absolute;
   right: 100%;
   top: 26px;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid red;
   border-bottom: 13px solid transparent;
   }

12 Point Burst（爆炸形状）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#burst-12 {
    background: red;
    width: 80px;
    height: 80px;
    position: relative;
    text-align: center;
    }
#burst-12:before, #burst-12:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 80px;
    background: red;
    }
#burst-12:before {
    -webkit-transform: rotate(30deg);
     -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -o-transform: rotate(30deg);
         }
#burst-12:after{
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    }

Yin Yang(阴阳八卦)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
    }
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
    }
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
    }

Badge Ribbon(徽章丝带)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#badge-ribbon {
 position: relative;
 background: red;
 height: 100px;
 width: 100px;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
 }
#badge-ribbon:before,#badge-ribbon:after {
  content: '';
  position: absolute;
  border-bottom: 70px solid red;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  top: 70px;
  left: -10px;
  -webkit-transform: rotate(-140deg);
  -moz-transform:    rotate(-140deg);
  -ms-transform:     rotate(-140deg);
  -o-transform:      rotate(-140deg);
  }
#badge-ribbon:after {
  left: auto;
  right: -10px;
  -webkit-transform: rotate(140deg);
  -moz-transform:  rotate(140deg);
  -ms-transform:  rotate(140deg);
  -o-transform:  rotate(140deg);
  }

Space Invader（太空入侵者）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#space-invader{
  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;
    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;
    margin: 50px 0 70px 65px;
  }

TV Screen（电视屏幕）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
  }
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
  }

Chevron（雪佛龙）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#chevron {
 position: relative;
 text-align: center;
 padding: 12px;
 margin-bottom: 6px;
 height: 60px;
 width: 200px;
}
#chevron:before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 height: 100%;
 width: 51%;
 background: red;
 -webkit-transform: skew(0deg, 6deg);
 -moz-transform: skew(0deg, 6deg);
 -ms-transform: skew(0deg, 6deg);
 -o-transform: skew(0deg, 6deg);
 transform: skew(0deg, 6deg);
}
#chevron:after {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 height: 100%;
 width: 50%;
 background: red;
 -webkit-transform: skew(0deg, -6deg);
 -moz-transform: skew(0deg, -6deg);
 -ms-transform: skew(0deg, -6deg);
 -o-transform: skew(0deg, -6deg);
 transform: skew(0deg, -6deg);
}

Magnifying Glass（放大镜）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#magnifying-glass{
font-size: 10em; /* This controls the size. */
display: inline-block;
width: 0.4em;
height: 0.4em;
border: 0.1em solid red;
position: relative;
border-radius: 0.35em;
}
#magnifying-glass::before{
content: "";
display: inline-block;
position: absolute;
right: -0.25em;
bottom: -0.1em;
border-width: 0;
background: red;
width: 0.35em;
height: 0.08em;
-webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
}

Facebook Icon（Facebook图标）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#facebook-icon {
 background: red;
 text-indent: -999em;
 width: 100px;
 height: 110px;
 border-radius: 5px;
 position: relative;
 overflow: hidden;
 border: 15px solid red;
 border-bottom: 0;
}
#facebook-icon::before {
 content: "/20";
 position: absolute;
 background: red;
 width: 40px;
 height: 90px;
 bottom: -30px;
 right: -37px;
 border: 20px solid #eee;
 border-radius: 25px;
}
#facebook-icon::after {
 content: "/20";
 position: absolute;
 width: 55px;
 top: 50px;
 height: 20px;
 background: #eee;
 right: 5px;
}

Cone(圆锥形)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  }

Moon(月亮)

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#moon{
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 red;
  }

Cross（十字架）

CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)

#cross {
  background: red;
  height: 100px;
  position: relative;
  width: 20px;
  }
#cross:after {
  background: red;
  content: "";
  height: 20px;
  left: -40px;
  position: absolute;
  top: 40px;
    width: 100px;
    }

以上就是纯CSS绘制的各种图形，感受到CSS的强大了吧。

위 내용은 CSS로 그린 가장 일반적인 40가지 그래픽 모양(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
이 기사는 web骇客에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：CSS로 그림자 테두리를 추가하는 방법(코드 예)다음 기사：CSS로 그림자 테두리를 추가하는 방법(코드 예)

관련 기사

더보기