2-7五角星的那五个角怎么确定到36度？

来源：2-9 编程练习

VisaW

2018-01-11 22:35:40

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        .flag {
            width: 300px;
            height: 200px;
            background-color: red;
            position: relative;
        }
        
        .star {
            position: absolute;
            width: 0;
            height: 0;
            border-right: 30px solid transparent;
            border-top: 20px solid yellow;
            border-left: 30px solid transparent;
            
        }
        
        .star::before {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-right: 20px solid yellow;
            border-bottom: 30px solid transparent;
            transform: rotate(-16deg) translateY(-44px);
        }
        
        .star::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-top: 30px solid transparent;
            border-left: 20px solid yellow;
            border-bottom: 30px solid transparent;
            transform: rotate(17deg) translate(-39px, -94px);
        }
        
        .big {
            left: 20px;
            top: 50px;
        }
        
        .small:nth-child(2) {
            left: 70px;
            top: 10px;
            transform:scale(0.35) rotate(-45deg);
        }
        
        .small:nth-child(3) {
            left: 90px;
            top: 35px;
            transform:scale(0.35) rotate(-30deg);
        }
        
        .small:nth-child(4) {
            left: 90px;
            top: 65px;
            transform:scale(0.35) rotate(-5deg);
        }
        
        .small:nth-child(5) {
            left: 70px;
            top: 85px;
            transform:scale(0.35) rotate(-45deg);
        }
    </style>
</head>
<body>
    <!-- 此处写代码 -->
    <div class="flag">
        <div class="star big"></div>
        <div class="star small"></div>
        <div class="star small"></div>
        <div class="star small"></div>
        <div class="star small"></div>
    </div>
</body>
</html>

五角星的那五个角怎么确定到36度，我画的border长度是随便给的，没有到36度，这个36度怎么使用border精确确定呢？

写回答

2回答

一路电光带火花

2018-01-12

<!DOCTYPE html>

<html>

<head>

<style>

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

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

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

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

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

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;

/*下面这条代码是必须的，表示在#star-five盒子之前插入一个非空的盒子*/

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: 0;

height: 0;

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: '';

}

</style>

</head>

<body>

</body>

</html>

我是这样写的，你看看

一路电光带火花

2018-01-12

你的效果实现的很不错了呀，你说的36度是什么意思啊？

hisaW

h 就是五角星的那五个角，每个角的角度是36度，我画的是30度的，因为sin30度是0.5比较好计算，如果是36度就会出现一个无限小数，这样border的宽度就不好设置，不知道有没有什么精确的办法能让那五个角成36度。

h018-01-12

共1条回复

0 学习 · 5012 问题

查看课程

相似问题

五角星边角怎么计算的？

回答 1

请问老师关于五角星的计算

回答 2

老师，五角星怎么画，不会。。。

回答 2

五角星怎么表示

回答 1

怎么实现五角星的图案呢？

回答 1

打开慕课网App查看更多内容