国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

css3怎樣實(shí)現(xiàn)三角形帶邊框效果

WBOY
發(fā)布: 2021-12-16 10:33:21
原創(chuàng)
7127人瀏覽過(guò)
方法:1、利用“border:長(zhǎng)度值 solid transparent;border-top:高度值 solid 顏色值”語(yǔ)句,可以設(shè)置空元素為三角形樣式;2、將小的三角形元素放置在不同顏色的大三角形元素內(nèi),就可以實(shí)現(xiàn)三角形帶邊框的效果。

css3怎樣實(shí)現(xiàn)三角形帶邊框效果

本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3怎樣實(shí)現(xiàn)三角形帶邊框效果

在css中,想要實(shí)現(xiàn)三角形帶邊框效果,需要利用border屬性。

首先我們需要一個(gè)寬和高都是0的div元素,然后利用border屬性設(shè)置div的邊框樣式,將邊框的粗細(xì)值設(shè)置為下三角長(zhǎng)度的一半,并將邊框顏色設(shè)置為透明色。

立即學(xué)習(xí)前端免費(fèi)學(xué)習(xí)筆記(深入)”;

最后再通過(guò)border-top屬性將div元素的上邊框顯示出來(lái)即可。

將小的三角形元素放置在不同顏色的大三角形元素內(nèi),就可以實(shí)現(xiàn)三角形帶邊框的效果。

示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #demo {
            width: 0;
            height: 0;
            position: relative;
            border-top: solid 50px transparent;
            border-right: solid 50px black;
            /* 黑色大三角形 */
            border-bottom: solid 50px transparent;
        }
 
        #demo:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: 3px;
            top: -45px;
            border-top: solid 45px transparent;
            border-right: solid 45px white;
            /* 白色小三角形 */
            border-bottom: solid 45px transparent;
        }
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>
登錄后復(fù)制

輸出結(jié)果:

39.png

(學(xué)習(xí)視頻分享:css視頻教程

以上就是css3怎樣實(shí)現(xiàn)三角形帶邊框效果的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!

最佳 Windows 性能的頂級(jí)免費(fèi)優(yōu)化軟件
最佳 Windows 性能的頂級(jí)免費(fèi)優(yōu)化軟件

每個(gè)人都需要一臺(tái)速度更快、更穩(wěn)定的 PC。隨著時(shí)間的推移,垃圾文件、舊注冊(cè)表數(shù)據(jù)和不必要的后臺(tái)進(jìn)程會(huì)占用資源并降低性能。幸運(yùn)的是,許多工具可以讓 Windows 保持平穩(wěn)運(yùn)行。

下載
相關(guān)標(biāo)簽:
css
來(lái)源:php中文網(wǎng)
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請(qǐng)聯(lián)系admin@php.cn
最新問(wèn)題
開源免費(fèi)商場(chǎng)系統(tǒng)廣告
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長(zhǎng)!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)