• 技术文章 >Web开发 >css教程

    css写五角星的方法

    小妮浅浅小妮浅浅2021-07-17 17:21:46转载427

    方法说明

    1、创建一个HTML示例文件。

    2、通过small名class创建div;最后通过设置“transform: rotate(70deg);”等样式来实现五角星即可。

    实例

    .small-all{
    display: flex;
    margin:1rem 13%;
    }
    .small {
        border-color: #7d7d7d transparent transparent transparent;
        border-style: solid;
        border-top-width: 9.375px;
        border-right-width: 15px;
        border-left-width: 15px;
        height: 0;
        margin-top: 9.375px;
        margin-bottom: 6.02679px;
        position: relative;
        width: 0;
        margin: 2rem 0.8rem;
    }
    .small:before,.small:after {
        border-color: #7d7d7d transparent transparent transparent;
        border-style: solid;
        border-top-width: 9.375px;
        border-right-width: 15px;
        border-left-width: 15px;
        content: '';
        display: block;
        height: 0;
        left: -15px;
        position: absolute;
        top: -9.375px;
        width: 0;
    }
    .small:before {
        transform: rotate(70deg);
    }
    .small:after {
        transform: rotate(-70deg);
    }

    以上就是css写五角星的方法,希望对大家有所帮助。更多css学习指路:css教程

    本文转载于php中文网,如有侵犯联系作者修改。

    专题推荐:css五角星
    品易云
    上一篇:css文档流的两种特性 下一篇:css设置溢出不换行的方法

    相关文章推荐

    • css px和pt的不同• css后代选择器的介绍• css中id与class的区别• css加滚动条的方法• css语法规则的组成• css和html的区别分析• css中浮动如何理解• css中tag的介绍• js和css有什么区别• css3和less有什么区别• css设置所有标签的方法• css样式冲突的解决办法• css行内样式的介绍• css中流的概念介绍• css文档流的两种特性

    全部评论我要评论

  • 取消发布评论
  • 

    Python学习网