css三角

给盒子添加上一个小三角
1.先画一个大盒子box1,再在大盒子中画一个小盒子box2
2.将box1设置相关的样式
3.使box2的宽高都为零,设置边框的粗细以及相关的样式,从而使得每边原本为梯形的边框变为三角形
4.根据所需要的三角形的形状,把另外的三边设置为透明色
5.再把这个三角形移动到相应的位置就可以了

选择器 {
        width:0;
        height:0;
        line-height:0;
        font-size:0;
        border:50px solid transparent;
        border-left-color: yellow;}
 <style>
        div {
            position: relative;
            width: 200px;
            height: 300px;
            margin-top: 50px;
            background-color: teal;
        }
        span {
            position: absolute;
            left: 200px;
            top: 20px;
            width: 0px;
            height: 0px;
            line-height: 0px;
            font-size: 0px;
            border: 20px solid transparent ;
            border-left-color: teal;

        }
    </style>
</head>
<body>
    <div>
        <span></span>
    </div>
</body>

css三角化

在黄色的盒子里面做一个这样的三角形
在黄色的盒子里面做一个这样粉色的三角形
1.先画一个大盒子box1,再在大盒子中画一个小盒子box2
2.将box1设置相关的样式
3.使box2的宽高都为零,设置边框的粗细以及相关的样式,从而使得每边原本为梯形的边框变为三角形
4.只保留box2右边边框有颜色,上边框要稍大一点,右边框稍小一点,其余边框为0
5.移动到相应的地方

选择器 {
         width : 0;
         height: 0;
          border-color: transparent pink transparent transparent;
          border-style: solid;
          border-width: 100px 50px 0px 0px;}
<style>
      .box2 {
          float: right;
          width: 0px;
          height: 0px;
          border-color: transparent pink transparent transparent;
          border-style: solid;
          border-width: 100px 50px 0px 0px;
      }
      .box1 {
          width: 150px;
          height: 100px;
          background-color: yellow;
      }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
   
</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值