css直角線 CSS的空心三角形,帶邊直角梯形

2021-10-13 11:28:12 字數 1440 閱讀 2442

題目,關鍵是右邊三角形

兩種獲得三角形的方法

1、正方形旋轉45度

2、只有border的圖形,一條邊就是實心三角形

用到的偽類after和before做圖形時,content為空,表現為block,定位為absolute。

transparent為透明。

此題最好用第二種,因為第一種不精確,以下是兩種**

#demo{

position: relative;

width: 100px;

height: 100px;

border: 2px solid #000;

#demo:after{

content: '';

display:inline-block;

position: absolute;

width: 14.1412px;

height: 14.1412px;

top:20px;

left:93px;

transform: rotate(45deg);

border-top: 2px solid #000;

border-right: 2px solid #000;

background-color: #fff;

#demo{

position: relative;

width: 100px;

height: 100px;

border: 2px solid #000;

#demo:after{

content: '';

position: absolute;

border: 10px solid transparent;

top:20px;

left: 100%;

border-left-color: #fff;

#demo:before{

content: '';

position: absolute;

border: 12px solid transparent;

top:18px;

left: 100%;

border-left-color: #000;

qq20180428110215.png

.abc::before{

content:"";

position:absolute;

left:0;

top:0;

width:16px;

height:16px;

box-sizing:border-box;

border-bottom:1px solid black;

transform-origin:bottom center;

transform:rotatez(45deg) scale(1.414);

margin-top:202px;

css空心三角形 CSS實現空心三角指示箭頭

web開發中,三角形的日常應用,以三角形指示箭頭最為常見,其用css來實現非常簡單,熟悉了之後相比於引入svg或是背景會是更好更靈活的選擇。而三角箭頭一般而言,又分為兩種,一種是視覺上沒有邊框的,我們叫做實心三角形 還有一種是視覺上有邊框的,而三角箭頭刨去邊框的部分又要與主體元素的背景顏色一致,我們...

空心三角形

把乙個字元三角形掏空,就能節省材料成本,減輕重量,但關鍵是為了追求另一種視覺效果。在設計的過程中,需要給出各種花紋的材料和大小尺寸的三角形樣板,通過電腦臨時做出來,以便看看效果。input每行包含乙個字元和乙個整數n 0這個題當初看到的時候挺簡單的,後來做了好長時間,這個輸出方式我表示很不理解,好像...

空心三角形

problem description 把乙個字元三角形掏空,就能節省材料成本,減輕重量,但關鍵是為了追求另一種視覺效果。在設計的過程中,需要給出各種花紋的材料和大小尺寸的三角形樣板,通過電腦臨時做出來,以便看看效果。input 每行包含乙個字元和乙個整數n 0output 每個樣板三角形之間應空上...