这样写可以吗?

来源:2-11 编程练习

神知

2021-10-23 16:43:49

<!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>页面1</title>

    <style>

        .box1{

            border: 20px solid transparent;

            width: 0;

            height: 0;

            border-left-color: red;

            border-radius:20px

        }

        .box2{

            border: 20px solid transparent;

            width: 0;

            height: 0;

            border-right-color: red;

            position: relative;

            top:-40px;

            border-radius:20px

        }

    </style>

</head>

<body>


</body>

    <div class="box1"></div>

    <div class="box2"></div>

</html>


写回答

1回答

好帮手慕星星

2021-10-23

同学你好,测试代码效果如下

https://img.mukewang.com/climg/6173d4a609c8adf102720207.jpg

与效果图有些不符,两个元素需要有叠加部分,并且弧度不全是圆角,还有直边部分

https://img.mukewang.com/climg/6173d53d0986b85802050170.jpg

参考调整:设置弧度小一些,并将box1向右侧移动

https://img.mukewang.com/climg/6173d57709b34b6d05420480.jpg

祝学习愉快!

0

0 学习 · 15276 问题

查看课程