方法:1、利用“border:長(zhǎng)度值 solid transparent;border-top:高度值 solid 顏色值”語(yǔ)句,可以設(shè)置空元素為三角形樣式;2、將小的三角形元素放置在不同顏色的大三角形元素內(nèi),就可以實(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>
輸出結(jié)果:
(學(xué)習(xí)視頻分享:css視頻教程)
以上就是css3怎樣實(shí)現(xiàn)三角形帶邊框效果的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
每個(gè)人都需要一臺(tái)速度更快、更穩(wěn)定的 PC。隨著時(shí)間的推移,垃圾文件、舊注冊(cè)表數(shù)據(jù)和不必要的后臺(tái)進(jìn)程會(huì)占用資源并降低性能。幸運(yùn)的是,許多工具可以讓 Windows 保持平穩(wěn)運(yùn)行。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://www.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)