zoukankan      html  css  js  c++  java
  • HTML: 用CSS畫一個三角形

    代碼如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>用CSS畫一個三角形</title>
        <style>
            #triangle {
                width:0;height:0;
                border-top:100px solid green;
                border-right:100px solid red;
                border-bottom:100px solid black;
                border-left:100px solid blue;
            }
        </style>
    </head>
    <body>
        
        <div id='triangle'></div>
    </body>
    </html>

    效果如圖:

    幾個注意:div寬度,高度分別爲0,而div邊框的寬度設定,這時可以看到四個三角形,那麼我們要取哪一個三角形,就需要讓其他三角的邊框的顏色爲透明?

    爲什麼是透明,而不是白色呢??

    因爲如果是白色,而三角型所在的區域同時又有背景色,那麼在三角型的區域就會把背景顏色覆蓋。

    如下圖:

    三角形白色部分把背景顏色覆蓋了!Error!

    那麼如何讓邊框變透明呢??

    答案就是border-color屬性中的默認值:transparent

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>用CSS畫一個三角形</title>
        <style>
            div.bg {
                background-color:maroon;
                height:500px;
            }
            #triangle {
                width:0;height:0;
                border-top:100px solid transparent;
                border-right:100px solid transparent;
                border-bottom:100px solid black;
                border-left:100px solid transparent;
            }
        </style>
    </head>
    <body>
        
        <div class='bg'>
            <div id='triangle'></div>
        </div>
    </body>
    </html>

    效果如圖:

    三角形成功出現,現在可以做一個模型了,比如tips,warnings.

      

  • 相关阅读:
    路由的使用
    组件之间的参数传递
    vue组件的全局注册和局部注册
    git版本回退(回退至上个版本,回退至指定版本) git放弃本地所有未提交的修改
    vue工程中的文件
    新建vue项目(webpack-simple)
    NPM install -save 和 -save-dev 傻傻分不清
    动态增加表单vue element ui
    JAVA声明一个对象数组
    调用测试用
  • 原文地址:https://www.cnblogs.com/Zell-Dinch/p/4266187.html
Copyright © 2011-2022 走看看