css 純 css 製作帶三角的邊框

首先附上效果圖：

以上的效果完全是用 css 來實現的，那麼是怎麼實現的呢？

我們知道 html 中有一些特殊的字元，具體的 html特殊字元大全

。通過特殊字元

，利用 css 中的 margin 或者 position 方法完全可以實現以上效果。

doctype html

>
<
html 
lang
="en-us"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>字元製作三角邊框
title
>
<
style 
type
="text/css"
>
*body
h1.demo1
.demo1 em,.demo1 span
.demo1 em
.demo1 span
.demo2
.demo2 em,.demo2 span
.demo2 span
style
>
head
>
<
body
>
<
h1>demo1 是用 margin 方法
h1>
<
div 
class
="demo1"
>
<
em>◆
em>
<
span
>◆
span
>
div>
<
h1>demo2 是用 position 方法
h1>
<
div 
class
="demo2"
>
<
em>◆
em>
<
span
>◆
span
>
div>
body
>
html
>

css 純 css 製作帶三角（border篇）

以前寫過一篇純css製作帶三角的邊框 那篇文章是用html特殊字元來製作三角的，今天介紹下，如何用 border 來製作三角。html 如下 div class arrow up div div class arrow down div div class arrow left div div cl...

CSS 小三角帶邊框帶陰影

乍一看，很簡單，做小三角，首先想到的是利用border的transparent特性，可以製作出小三角的效果。但是注意，這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西，讓兩者有1px的錯位。問題就解決了。不想在頁面新增多餘的無意義的標籤，還想實現這...

用css製作帶三角矩形

校園招聘的筆試題目中也有一道題目要求利用 css來繪出乙個帶三角矩形。如圖所示。在css 中，三角形是採用盒子模型的 border 屬性來繪製的。所以在進行上圖繪製之前有必要回顧一下 css盒子模型。css盒子模型同一方向共有四個屬性，比如橫向有 margin border padding widt...