精华内容
下载资源
问答
  • css画梯形,css画五角星, css画六角星 ,css画六边形css画梯形.triangle {border-bottom: 100px solid #F36823;border-left: 50px solid transparent;border-right: 50px solid transparent;height: 0px;width: 100...

    css画梯形,css画五角星, css画六角星 ,css画六边形

    css画梯形

    .triangle {

    border-bottom: 100px solid #F36823;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    height: 0px;

    width: 100px;

    }

    css画五角星

    .triangle{

    margin: 50px 0;

    position: relative;

    display: block;

    color: #F36823;

    width: 0px;

    height: 0px;

    border-right: 100px solid transparent;

    border-bottom: 70px solid #F36823;

    border-left: 100px solid transparent;

    -moz-transform: rotate(35deg);

    -webkit-transform: rotate(35deg);

    -ms-transform: rotate(35deg);

    -o-transform: rotate(35deg);

    }

    .triangle:before {

    border-bottom: 80px solid #F36823;

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

    }

    .triangle:after {

    position: absolute;

    display: block;

    color: #F36823;

    top: 3px;

    left: -105px;

    width: 0px;

    height: 0px;

    border-right: 100px solid transparent;

    border-bottom: 70px solid #F36823;

    border-left: 100px solid transparent;

    -webkit-transform: rotate(-70deg);

    -moz-transform: rotate(-70deg);

    -ms-transform: rotate(-70deg);

    -o-transform: rotate(-70deg);

    content: '';

    }

    css画六角星

    .triangle{

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

    position: relative;

    }

    .triangle:after{

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

    position: absolute;

    content: "";

    top: 30px;

    left: -50px;

    }

    css画六边形

    .triangle{

    width: 100px;

    height: 55px;

    background: #F36823;

    position: relative;

    }

    .triangle: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 #F36823;

    }

    .triangle: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 #F36823;

    }

    展开全文
  • 2-3 *{ margin: 0;padding: 0; } .backgroundOne{ width:300px; height:200px; background-color:#f00; border-radius: 15px; } .backgroundOne > div { width: 0px;...} 各位大神指点下,这个五角星为何不正。
    2-3

    *{

    margin: 0;padding: 0;

    }

    .backgroundOne{

    width:300px;

    height:200px;

    background-color:#f00;

    border-radius: 15px;

    }

    .backgroundOne > div {

    width: 0px;

    height: 0px;

    border-right: 100px solid transparent;

    border-bottom: 70px solid #ff0;

    border-left: 100px solid transparent;

    -webkit-transform: rotate(35deg);

    -moz-transform: rotate(35deg);

    -ms-transform: rotate(35deg);

    -o-transform: rotate(35deg);

    transform: rotate(35deg);

    }

    .backgroundOne > div::after{

    width: 0px;

    height: 0px;

    display: block;

    border-right: 100px solid transparent;

    border-bottom: 70px solid #ff0;

    border-left: 100px solid transparent;

    content: '';

    -webkit-transform: rotate(-70deg) translate(29px,-130px);

    -moz-transform: rotate(-70deg) translate(29px,-130px);

    -ms-transform: rotate(-70deg) translate(29px,-130px);

    -o-transform: rotate(-70deg) translate(29px,-130px);

    transform: rotate(-70deg) translate(29px,-130px);

    }

    .backgroundOne > div::before{

    height: 0px;

    width: 0px;

    display: block;

    content: '';

    border-right: 30px solid transparent;

    border-bottom: 80px solid #ff0;

    border-left: 30px solid transparent;

    -webkit-transform: rotate(-35deg) translate(-30px,-80px);

    -moz-transform: rotate(-35deg) translate(-30px,-80px);

    -ms-transform: rotate(-35deg) translate(-30px,-80px);

    -o-transform: rotate(-35deg) translate(-30px,-80px);

    transform: rotate(-35deg) translate(-30px,-80px);

    }

    .backgroundOne > div:nth-child(1) {transform: translate(-50px, 20px) rotate(35deg) scale(0.3,0.3);}

    .backgroundOne > div:nth-child(2) {transform: translate( 0px, -80px) rotate(60deg) scale(0.1,0.1);}

    .backgroundOne > div:nth-child(3) {transform: translate( 22px, -125px) rotate(80deg) scale(0.1,0.1);}

    .backgroundOne > div:nth-child(4) {transform: translate( 22px, -162px) rotate(35deg) scale(0.1,0.1);}

    .backgroundOne > div:nth-child(5) {transform: translate( 0px, -210px) rotate(65deg) scale(0.1,0.1);}

    各位大神指点下,这个五角星为何不正。

    展开全文
  • CSS绘制五角星-编程狮(w3cschool.cn)#star-five{margin:100px0;position:relative;display:block;color:red;width:0px;/*设置元素宽高为0*/height:0px;border-right:100pxsolidtransparent;/*设置右部分为透明*/...

    html>

    CSS绘制五角星 - 编程狮(w3cschool.cn)

    #star-five {

    margin: 100px 0;

    position: relative;

    display: block;

    color: red;

    width: 0px;/*设置元素宽高为0*/

    height: 0px;

    border-right:  100px solid transparent;/*设置右部分为透明*/

    border-bottom: 70px  solid #ff0000;/*设置底部为红色*/

    border-left:   100px solid transparent;/*设置左部分为透明*/

    /*旋转角度为顺时针35度*/

    -moz-transform:    rotate(35deg);/*Firefox*/

    -webkit-transform: rotate(35deg);/*Safari 和 Chrome*/

    -ms-transform:     rotate(35deg);/*IE 9*/

    -o-transform:      rotate(35deg);/*Opera*/

    }

    #star-five:before {

    border-bottom: 80px solid #ff0000;

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

    border-left: 100px solid transparent;

    -webkit-transform: rotate(-70deg);

    -moz-transform:    rotate(-70deg);

    -ms-transform:     rotate(-70deg);

    -o-transform:      rotate(-70deg);

    content: '';

    }

    展开全文
  • 这篇文章给大家带来的是纯 CSS 绘制五角星、六角形、五边形、六边形、心形等等。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果...

    这篇文章给大家带来的是纯 CSS 绘制五角星、六角形、五边形、六边形、心形等等。我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。

    Star (6-points)

    #star-six {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-bottom: 100px solid red;

    position: relative;

    }

    #star-six:after {

    width: 0;

    height: 0;

    border-left: 50px solid transparent;

    border-right: 50px solid transparent;

    border-top: 100px solid red;

    position: absolute;

    content: "";

    top: 30px;

    left: -50px;

    }

    Star (5-points)

    #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

    #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

    #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

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

    border-right: 29px solid #eee;

    width: 42px;

    height: 0;

    }

    #octagon:after {

    content:"";

    position: absolute;

    bottom: 0;

    left: 0;

    border-top: 29px solid red;

    border-left: 29px solid #eee;

    border-right: 29px solid #eee;

    width: 42px;

    height: 0;

    }

    Heart

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

    }

    大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】

    0

    如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

    展开全文
  • 五角星#star-five {margin: 50px;position: relative;display: block;color: red;width: 0;height: 0;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent....
  • CSS画五角星

    2016-07-03 20:43:00
    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>五角星</title> <style> #star-five { margin: 50px; posit...
  • 满意答案aa0151512017.06.26采纳率:48%等级:9已帮助:214人#star-five{margin:60px0;position:relative;display:block;color:red;width:0px;height:0px;border-right:100pxsolidtransparent;border-bottom:70px...
  • CSS绘制五角星

    2020-10-26 17:56:42
    CSS绘制五角星、六角形、五边形、六边形、心形
  • css3画五角星

    千次阅读 2017-11-26 15:48:07
    <style type="text/css"> div{ width: 0; height: 0; border-left: 100px solid transparent; border-bottom: 70px solid red; border-right: 100px solid transparent; transform: rotate(36...
  • CSS绘制五角星-编程狮(w3cschool.cn)#star-five{margin:100px0;position:relative;display:block;color:red;width:0px;/*设置元素宽高为0*/height:0px;border-right:100pxsolidtransparent;/*设置右部分为透明*/...
  • CSS画五角星

    2020-04-07 09:32:56
    #star-five { margin: 60px 0; position: absolute; display: block; color: red; width: 0; height: 0; border-right: 100px solid transparent; border-bottom: 70px solid red...
  • 今天我们就用css3来画五角星跟六角星,里面用到了css3的伪元素还有三角形组合起来的 五角星 分三部分,两个钝角三角形在下面叠加在一起,上面一个三角形 <!DOCTYPE html> <html> <head> <...
  • css clip-path 画五角星

    2020-06-02 14:15:09
    有了clip-path,就可以轻易的实现任意多边形 绘制五角星 五角星div> div{ color: #fff; font-size: 24px; text-align: center; width: 200px; height: 200px; line-height: 200px; background: red; /* 绘制路径 *...
  • 下面本篇文章给大家介绍一下如何使用纯CSS绘制五角星、六角形、五边形、六边形、心形。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。1、五角星#star-five {margin: 50px 0;position: relative;...
  • [css] 使用css画出一个五角星 #star-five { margin: 50px 0; position: absolute; display: block; color: red; width: 0; height: 0; border-right: 100px solid transparent; border-bottom: 70px solid ...
  • 五角星 <style> <!--样式--> .star{ width: 0px; height: 0px; border-bottom: 70px solid red; border-left: 100px solid transparent; ...
  • 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">... ...
  • 这里说的用css做图形,其实是使用一个html元素,结合它的伪元素 ::before & ::after (不需要其他额外的非伪元素的html元素),然后定义样式来生成所需的图形。这里不是说不可以使用其它的html元素,只是这样的...
  • 原题:使用turtle画五角星:我的代码:#!/usr/bin/python# encoding=utf-8# -*- coding: UTF-8 -*-from turtle import Turtlep = Turtle() #p.speed(3) #画笔速度p.pensize(5) #画笔粗细p.color("blac...
  • 画五角星

    2020-10-27 11:07:17
    **<!-- 五角星是由3个三角形组成 六角星 是由2个三角形组成(一个尖朝上,一个尖朝下) -->**
  • div{ margin: 100px auto; width: 100px; height: 100px; border: 90px solid #00BFFF; border-radius: 50%; }

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,934
精华内容 773
关键字:

css画五角星