通過CSS的border繪製三角形

2022-01-18 05:07:44 字數 3205 閱讀 1962

通過css的border 可以繪製出三角形, 不同的樣式組合，有著不同的效果，可以控制它的大小，顏色，方向。看下面各種圖形，相信可能還有很多圖形，大家都沒見過。

先寫出公共的樣式：

1 .border
在上面的css基礎上，新增下面的組合**，將可以控制三角形的方向：

1 border-left-color: #000;

1 border-right-color: #000;

1 border-top-color: #000;

1 border-bottom-color: #000;

1 border-left-color: #000;


2 border-bottom-color: #000;



1 border-right-color: #000;


2 border-bottom-color: #000;



1 border-right-color: #000;


2 border-top-color: #000;



1 border-left-color: #000;


2 border-top-color: #000;



1 border-top-color: #000;


2 border-bottom-color: #000;



1 border-left-color: #000;


2 border-right-color: #000;



1 border-top-color: #000;


2 border-left-color: #000;


3 border-bottom-color: #000;



1 border-top-color: #000;


2 border-left-color: #000;


3 border-right-color: #000;



1 border-bottom-color: #000;


2 border-left-color: #000;


3 border-right-color: #000;



1 border-top-color: #000;


2 border-right-color: #000;


3 border-bottom-color: #000;
還有下面的這個效果，

1 border-left-color: #000;


2 border-right-color: #000;


3 border-left-width: 3rem;
不同的組合產生不同的效果，大家可以嘗試各種組合帶來的效果。

分類: css3

通過css的border 可以繪製出三角形, 不同的樣式組合，有著不同的效果，可以控制它的大小，顏色，方向。看下面各種圖形，相信可能還有很多圖形，大家都沒見過。

先寫出公共的樣式：

1 .border
在上面的css基礎上，新增下面的組合**，將可以控制三角形的方向：

1 border-left-color: #000;

1 border-right-color: #000;

1 border-top-color: #000;

1 border-bottom-color: #000;

1 border-left-color: #000;


2 border-bottom-color: #000;



1 border-right-color: #000;


2 border-bottom-color: #000;



1 border-right-color: #000;


2 border-top-color: #000;



1 border-left-color: #000;


2 border-top-color: #000;



1 border-top-color: #000;


2 border-bottom-color: #000;



1 border-left-color: #000;


2 border-right-color: #000;



1 border-top-color: #000;


2 border-left-color: #000;


3 border-bottom-color: #000;



1 border-top-color: #000;


2 border-left-color: #000;


3 border-right-color: #000;



1 border-bottom-color: #000;


2 border-left-color: #000;


3 border-right-color: #000;



1 border-top-color: #000;


2 border-right-color: #000;


3 border-bottom-color: #000;
還有下面的這個效果，

1 border-left-color: #000;


2 border-right-color: #000;


3 border-left-width: 3rem;
不同的組合產生不同的效果，大家可以嘗試各種組合帶來的效果。

CSS學習筆記 利用border繪製三角形

在前端的筆試 面試過程中，經常會出現一些不規則圖形的css設定，基本上多是矩形外加乙個三角形。利用css屬性可以實現三角形的生成，主要利用上下左右的邊距的摺疊。1 第一種圖形 2 第二種圖形 3 右上 右下 左上 左下三角形 1 右上三角 2 box2 10 右下三角 11 box3 19 左上三角...

使用css中的border繪製三角形的方法和原理

首先看看怎麼實現的貼上 lang en charset utf 8 title sjx style head class sjx div body html 效果圖 主要 就是style中的border樣式。首先寬高設為0，border width就是三角形的高度，border color 上，右，...

CSS 關於css中的border

曾經一直以為html中的border是直角的，直到有一天 test效果如下 突然有一種被欺騙了的感覺。我們可以選擇理解乙個border為兩個三角形再加乙個矩形。如上所示。繪製小尾巴 當對乙個角應用圓角樣式，如果這個角相鄰的兩個border乙個有定義而乙個無定義，那麼繪製的結果就是由粗到細的 小尾巴了...