zoukankan      html  css  js  c++  java
  • ☀【布局】三角

    Creating Triangles in CSS
    http://jonrohan.me/guide/css/creating-triangles-in-css/

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .wrap {
                width: 100px;
                background: #F00;
            }
            .box {
                margin-bottom: 10px;
                margin-right: auto;
                margin-left: auto;
            }
            .box-1 {
                border-width: 6px;
                border-style: solid;
                border-color: #FF0;
            }
            .box-2 {
                border-width: 6px;
                border-style: solid dashed;
                border-color: #FF0 transparent;
            }
            .box-3 {
                border-width: 6px 6px 0;
                border-style: solid dashed;
                border-color: #FF0 transparent;
            }
            .box-4 {
                width: 0;
                height: 0;
                overflow: hidden;
                border-width: 6px 6px 0;
                border-style: solid dashed;
                border-color: #FF0 transparent;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box box-1"></div>
            <div class="box box-2"></div>
            <div class="box box-3"></div>
            <div class="box box-4"></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    17.CSS 文本属性和字体属性
    15.CSS 浮动
    D. Same GCDs
    B. Infinite Prefixes
    D. 0-1 MST
    lambda表达式复习
    D. New Year and Conference
    C. New Year and Permutation
    D. Dr. Evil Underscores
    D. Minimax Problem
  • 原文地址:https://www.cnblogs.com/jzm17173/p/2607672.html
Copyright © 2011-2022 走看看