以前看漫畫的時候如果有對話內容，一般會有乙個邊框，然後帶著乙個三角從說話人的身上引出。類似下圖這樣：
應該有很多方法來實現，這裡提供的辦法就是創造乙個邊框，然後用兩個三角覆蓋。效果如下：
為了方便理解，我給body加了個黑色背景，是這樣：
**如下：
doctype html>
<
html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>帶三角缺口的邊框
title
>
<
style
>
.out
.inner
div
style
>
head
>
<
body
>
<
div>
<
span
class
="out"
>
<
span
class
="inner"
>
span
>
span
>
div>
body
>
html
>
CSS 小三角帶邊框帶陰影
乍一看，很簡單，做小三角，首先想到的是利用border的transparent特性，可以製作出小三角的效果。但是注意，這個小三角本身就是邊框製作出來的。怎麼能在小三角的外邊再加一層小邊框呢。那就必須再疊加一層一樣的東西，讓兩者有1px的錯位。問題就解決了。不想在頁面新增多餘的無意義的標籤，還想實現這...
CSS 帶邊框的三角形
思路是將2個三角形疊加起來，外層的三角形稍微大一些。思路和 css 內圓角 這個筆記的 方法一 類似。這個筆記最後會補充 css 畫三角形 這個筆記裡記漏的一點。html css parent child 以上是最終 逐步分析 css parent child 一開始的思路是分別生成外層和內層的三角...
css 純 css 製作帶三角的邊框
首先附上效果圖 以上的效果完全是用 css 來實現的，那麼是怎麼實現的呢？我們知道 html 中有一些特殊的字元，具體的 html特殊字元大全 通過特殊字元 利用 css 中的 margin 或者 position 方法完全可以實現以上效果。doctype html html lang en us ...