盒子模型划分网页模块--播放器图标

播放器图标

三角形模型原码:
<style>
.triangle{
   width: 0;
            height: 0;
            border: 40px solid red;
            border-top-color: black;
            border-bottom: none;
            border-left-color: transparent;
            border-right-color: transparent;
}
<style>

55 23:06:34
<div>

<div class="triangle">
</div>
</div>

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>手动实践4</title>

       <style>

              .a{

                     width: 500px;

                     height: 500px;

                     margin: 50px auto;

                     background-image: linear-gradient(180deg,#492646,#d3b4d4,#81476b);

                     padding-top: 5px;

              }

              .b{

                     width: 300px;

                     height: 300px;

                     background-image: linear-gradient(0deg,#492646,#81476b);

                     box-shadow: 5px 5px 10px 2px #512f4d;

                     margin:100px auto;

                     border-radius: 10%;

                     padding: 5px;

              }

              .c{

                     width: 180px;

                     height: 180px;

                     background-image: linear-gradient(0deg,#a85a67,#fab097);

                     border-radius: 7%;

                     margin:50px auto;

                     border:#241826 15px solid;       

              }

              .e{

                     width: 100px;

                     height:118px;

                     background: #ffffff;

                     border-radius:50%;

                     margin:30px auto;

                     padding-left: 20px;

                     padding-top: 2px;

              }

       .triangle{

                  width:5px;

            height:0px;

            border: 30px solid red;

            border-top-color: transparent;

            border-bottom-color: transparent;

            border-left-color: #281a29;

            border-right-color: transparent;

                     margin:auto;

                  margin: 30px;

                     }

       </style>

</head>

<body>

       <div class="a">

              <div class="b">

                     <div class="c">

                            <div class="d">

                                   <div class="e">

                                          <div class="triangle">

                                          </div>

                                   </div>

                            </div>

                     </div>

              </div>

       </div>

</body>

</html>

  • 7
    点赞
  • 59
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不止代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值