老师，三角形怎么变化成五角星啊，边框能移动吗

来源：2-13 编程练习

一心励志当码农

2021-04-29 11:24:18

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg {
            width: 300px;
            height: 200px;
            background-color: red;
            margin: 40px auto;
        }

        .star1 {
            width: 0;
            height: 0;
            border-top: 10px solid blue ;
            border-right: 10px solid green;
            border-bottom: 10px solid yellow;
            border-left: 10px solid pink;
        }
    </style>
</head>
<body>
    <div class="bg">
        <div class="star1"></div>
        <div class="star2"></div>
        <div class="star3"></div>
        <div class="star4"></div>
        <div class="star5"></div>
    </div>
</body>
</html>

写回答

1回答

好帮手慕久久

2021-04-29

已采纳

同学你好，边框自身不能移动，但是三角形可以移动、旋转。一个边框不透明，其他三个边框透明，可以形成一个三角形；三个三角形通过旋转、移动位置，可以拼接成一个五角星：

以.star1为例，可以如下实现三角形（:before和:after各是一个三角形）：

由于五角星形状都是相同的，所以.star1的形状，可以复用在其他几个三角形上，然后将其他几个三角形缩小并移动到合适位置即可：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .bg {
      width: 300px;
      height: 200px;
      background-color: red;
      margin: 40px auto;
    }
    .star {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 35px solid yellow;
      position: relative;
      transform: rotate(35deg);
    }

    .star:before {
      display: block;
      content: '';
      height: 0;
      width: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 35px solid yellow;
      position: absolute;
      left: -52px;
      top: 2px;
      transform: rotate(287deg)
    }

    .star:after {
      display: block;
      content: '';
      height: 0;
      width: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 35px solid yellow;
      position: absolute;
      left: -52px;
      top: 3px;
      transform: rotate(215deg);
    }
    .star1{
      transform: translate(0,48px);
    }
    .star2{
        transform:translate(82px,-34px) rotate(-10deg) scale(0.4);
    }
    .star3{
        transform:translate(117px,-34px)  rotate(0deg)   scale(0.4);
    }
    .star4{
        transform:translate(115px,-19px) rotate(36deg) scale(0.4);
    }
    .star5{
        transform:translate(81px,-21px) rotate(0deg) scale(0.4);
    }
  </style>
</head>
<body>
  <div class="bg">
    <div class="star star1"></div>
    <div class="star star2"></div>
    <div class="star star3"></div>
    <div class="star star4"></div>
    <div class="star star5"></div>
  </div>
</body>
</html>

祝学习愉快！

0 学习 · 15276 问题

查看课程

相似问题

【2-13 五角星】注意记住transform等属性，border用一个角做五角星就行了。

回答 1

红旗的五角星怎么做啊

回答 1

关于五角星的问题

回答 1

为啥我把通过伪元素添加的两个三角形旋转72度时，五角星的顶角无法完全重合，调成72.5度时看起来是重合的

回答 1

请老师检查

回答 1

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