zoukankan      html  css  js  c++  java
  • css 实现三角形

    盒模型中的div默认是一个矩形。那么我们怎么实现三角形呢。

    使用字符中的符号。这个跟字体相关,在布局上基本没什么用。

    矩形沿着一个角用斜线切一刀就可以得到三角形

    一、怎么实现切一刀呢?

    1、宽高为0的矩形。设置边框。可以将矩形分为四个三角形。

            #demo1 {
                width: 0;
                height:0;
                border-top: 100px solid red;
                border-bottom: 50px solid green;
                border-left: 50px solid blue;
                border-right: 50px solid grey;
            }
     

    2、使用无过渡线性渐变的方式

    #demo2 {
                width: 200px;
                height: 100px;
                background: linear-gradient(45deg, red, red 70.72px, green 70.72px, green 200px);
            }
     

    3、使用角向渐变

    #demo3 {
                width: 200px;
                height: 100px;
                background: conic-gradient(from 90deg at 0 0, red 0, red 10deg, green 10deg);
            }
     

    4、使用旋转出父元素,超出隐藏的方式。

    #demo4 {
                width: 300px;
                height: 100px;
                position: relative;
                overflow: hidden;
            }
                #demo4::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: red;
                    transform-origin: left bottom;
                    transform: rotate(65deg);
                }
     

    5、css裁剪属性

    #demo5 {
                width: 100px;
                height: 100px;
                background: red;
                clip-path: polygon(0 0, 50px 0, 0 100px, 0 0);
            }
     

    二、怎么实现角度呢?

    使用 rotate ,实现不同角度

    #demo7 {
                width: 0;
                height: 0;
                border-top: 100px solid red;
                border-bottom: 50px solid green;
                border-left: 50px solid blue;
                border-right: 50px solid grey;
                transform: rotate(45deg);
            }
     

    三、移除不必要的部分

    例1-例3中把不要的部分颜色设置为transparent就可以了。

            #demo8 {
                width: 0;
                height: 0;
                border-top: 100px solid red;
                border-bottom: 50px solid transparent;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                transform: rotate(45deg);
            }
     

    四、调整占位

    如上的方式实现三角形后,在流中,会额外占用一部分位置。需要调整一下,这里根据具体需求来,例1中使用margin-bottom将不需要的border-bottom占用的50px拉回去。

    下面的例子还存在着旋转导致的位置偏移。所以拉回去50px的效果依然不理想。这里需要根据实际的需求来调整了。没有一个完美的方案。

            #demo9 {
                width: 0;
                height: 0;
                border-top: 100px solid red;
                border-bottom: 50px solid transparent;
                margin-bottom:-50px;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                transform: rotate(45deg);
            }
            #demo10 {
                width: 100px;
                height: 100px;
                border:1px solid green;
            }
     
     
     
    五、兼容性
    上面的部分方法。不能在IE11之前正常运行。
    两个黄鹂鸣翠柳,一行代码上青天
  • 相关阅读:
    20155219 2017-2018-1 《信息安全系统设计》第4周学习总结
    20155219 2017-2018-1 《信息安全系统设计》第3周学习总结
    20155219实践题目实现od命令
    20155219 2017-2018-1 《信息安全系统设计》第4周课堂实践
    2017-2018-1 20155219《信息安全系统设计基础》第1周学习总结
    课堂实践6-7
    20155219 实验五《网络编程与安全》实验报告
    20155219 2016-2017-2《Java程序设计》课程总结
    20155212 mybash的实现
    20155212 2017-2018-1 《信息安全系统设计》第5周学习总结
  • 原文地址:https://www.cnblogs.com/tanl/p/14753137.html
Copyright © 2011-2022 走看看