用CSS代碼在網頁上繪製漂亮的三角標記

我們用CSS代碼可以在網頁上面繪製各種的圖標標誌,漂亮的三角形標誌通過一系列的樣式聲明就可以呈現出來,這樣的特色標誌可以用在很多的地方。

工具/原料

dreamweaver

方法/步驟

案例分析:我們要做三個三角形標誌,一個是大的帶字的,兩個是小的,不同顏色的三角形。

代碼實現:要實現這樣的一系列標誌,我們要聲明三次不同的三角形樣式,還有下文本元素的呈現。

大的三角形代碼如下:

<section  style="

width:100%;

margin:1em auto;

text-align: center;" id="三角形標記" >

<section class="xhr" style="width: 0px; height: 0px; border-left-width: 25px; border-left-style: solid; border-left-color: transparent; border-right-width: 25px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 40px; border-bottom-style: solid; border-bottom-color: rgb(255, 100, 31); margin: 0px auto;"></section>

<section>

文字的代碼如下:

<section>

<p class="wihudong" style="margin-top: -1.5em; color: rgb(255, 255, 255); font-size: 12px;">

百度

</p>

</section>

一個橙色的小角形代碼如下:

</section>

<section class="xhr" style="width: 0px; height: 0px; border-left-width: 15px; border-left-style: solid; border-left-color: transparent; border-right-width: 15px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: rgb(255, 100, 31); margin: 0px auto;"></section>

剩餘的代碼也一一給出來,從而讓整個圖形呈現出來。

<section class="xhr" style="width: 0px; height: 0px; border-left-width: 15px; border-left-style: solid; border-left-color: transparent; border-right-width: 15px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: blue; margin: 0px auto;"></section>

<section class="xhr" style="width: 0px; height: 0px; border-left-width: 15px; border-left-style: solid; border-left-color: transparent; border-right-width: 15px; border-right-style: solid; border-right-color: transparent; border-bottom-width: 20px; border-bottom-style: solid; border-bottom-color: orange; margin: 0px auto;"></section>

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場