CSS3 三角形的做法 文字溢位

2021-09-29 10:16:59 字數 1531 閱讀 2025

一、三角形的做法：三角形是根據邊框線來做的

當給div邊框線設定比較寬的時候：

div<


/style>


<


/div>


<


/body>
結果：

寬度和高度設定為0後：

div<


/style>


<


/div>


<


/body>
結果：

四個邊的邊框線變成了三角形，並拼成了乙個矩形，可以通過設定四個邊框線的顏色和寬度來生成三角形。

第一種：把其他三個邊框線的顏色設定成透明的，就得到了乙個三角形

div<


/style>


<


/div>


<


/body>
結果：

第二種：把其他三個邊框線的顏色設定成透明的，再把其中挨著的乙個邊框線的寬度設為0，就得到了由邊框線一半生成的三角形。

div<


/style>


<


/div>


<


/body>
結果：

第三種：把其他兩個邊框線的顏色設定成透明的，就得到了乙個拼接的三角形

div<


/style>


<


/div>


<


/body>
結果：

梯形：

div<


/style>


<


/div>


<


/body>
二、溢位文字用省略號表示
div<


/style>


lorem ipsum luptates? aperiam maxime porro quo voluptatem dicta eaque modi repellat.


<


/div>


div<


/style>


lorem ipsum luptates? aperiam maxime porro quo voluptatem dicta eaque modi repellat.


<


/div>

css3 三角形 三角形的內切圓

直角三角形 內切圓半徑為r a b c 2 a,b為直角邊，c為斜邊 一般三角形 內切圓半徑為r 2s a b c s是三角形的面積公式 與三角形三邊都相切的圓叫做三角形的內切圓，圓心叫做三角形的內心，三角形叫做圓的外切三角形。三角形的內心是三角形三條角平分線的交點。拓展資料 三角形一定有內切圓，其...

CSS3實現三角形

下面用css3分別實現向上 下 左 右的三角形 箭頭向上 arrow up 箭頭向下 arrow down 箭頭向左 arrow left 箭頭向右 好了原理我們了解了，那麼我們就實戰一下吧，來實現帶小三角形的div框。首先，寫出html hello，我出生了 hello，我出生了 hello，我出...

css繪製向左三角形 CSS繪製三角形

1.繪製乙個外邊框 div 2.重定義外邊框樣式 當外邊框有了寬度，不知大家是否想乙個問題，相鄰的線條邊界在哪，下面通過把外邊框相鄰側邊設定不同顏色來觀察 使用下面的語句替換上面的border定義 border bottom 50px solid 555555 border top 50px sol...