用css樣式畫三角形(提示框三角形)
- 經常用於提示框,下拉選單等(csdn也很多用到,最後一圖)
-
三角形畫法
- html結構
<div class="triangle">
</div> - 三角形畫法
- 用border畫出,當width、height均為100px時
-
.triangle { width: 100px; height: 100px; border-left: 10px solid #7d7b7b; border-top: 10px solid #5851c3; border-right: 10px solid #21a4d6; border-bottom: 10px solid #4ed621; box-sizing: border-box; }
-
–>結果:
改變{width:0; height:0}
–>–>再去掉
border-top
—>–>可以看見上面的一半已經沒有了
–>設定左右兩邊
border-color:transparent;
–>
–>就得到了想要的三角形了,這是向上的,想要哪邊就畫哪邊的border,並且讓它相鄰兩邊的border-color:transparent
–>程式碼
.triangle { width: 0; height: 0; border-left: 10px solid transparent; /*border-top: 10px solid #5851c3;*/ border-right: 10px solid transparent; border-bottom: 10px solid #4ed621; box-sizing: border-box; }
-
畫提示框三角形(有邊緣的)
如圖:
- 原理:先畫一個三角形,再畫白色三角形的,調整幾畫素位置,覆蓋掉一邊
-
–>
- 程式碼
-
.triangle { position: relative; width: 100px; height: 50px; border: 2px solid #4ed621; border-radius: 5px; } .triangle:before { position: absolute; content: ""; top: -10px; left: 25px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #4ed621; } /* 白色覆蓋*/ .triangle:after { position: absolute; content: ""; /*減少兩畫素*/ top: -8px; left: 25px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #fff; } <div class="triangle"></div>
-
結果:
–> –> - 至此,三角形畫完,只用到了css2的屬性,相容性一覽無餘
- 推薦一款優秀的線上畫圖工具,很不錯(不是廣告啊!)
相關推薦
用css樣式畫三角形(提示框三角形)
經常用於提示框,下拉選單等(csdn也很多用到,最後一圖) 三角形畫法 html結構 <div class="triangle"> </div> 三角形畫法 用border畫出,當width、height均為100px時
用css畫三角形(提示框三角形)
三角形使用情形 經常用於提示框,下拉選單等(csdn也很多用到,最後一圖),看圖: 由於在網頁中經常要用到,所以特地研究 圖片實現(感覺low)、svg實現(小題大作了),所以最後還是cs
EasyUI 學習(1)-Tooltip(提示框)
fun 銷毀 跟著 num sel function bsp del trac 一、創建組件 Tooltip不依賴其他組件 1.使用class加載 <a href="#" class="easyui-tooltip" title="這是一個提示信息">Hover
用css樣式,為表格加入邊框
代碼編輯器 分享 pre marker 編輯器 title 像素 css樣式 class 用css樣式,為表格加入邊框 Table 表格在沒有添加 css 樣式之前,是沒有邊框的。這樣不便於我們後期合並單元格知識點的講解,所以在這一節中我們為表格添加一些樣式,為它添加邊
[css]我要用css畫幅畫(七) - 哆啦A夢
順序 tar car 輸入 url bsp 完成 難度 tool 原文鏈接 接著之前的[css]我要用css畫幅畫(六),今天畫的有所不同,畫的是哆啦A夢,我們小時候對他的稱呼其實是小叮當機器貓。 (PS:這次我要做的事情,很多人已經做過,這並不是什麽創新,我只是在學習並記
CSS樣式設置(水平居中、垂直居中)
ble 屬性 -a top code 長度 str 行內元素 我們 一、水平居中 種類 元素屬性 特征 例子 內聯元素 文本、圖片等行內元素 通過給父元素設置 text-align:center 來實現的 .imgCenter{ text-align:cent
CSS樣式選擇器(1)
class 是按照 同類型 來歸類HTML的各種元素的,要把某些元素歸為一類,一般會考慮到下面這些因素: 它們具有同樣的樣式,比如不管他們的標籤是什麼,h1 或者是 div,但是字型大小都是 16px; 它們是一種具有同樣意義的東西,比如我們做網站,一般首頁的 LOGO
UIAlertView(提示框)
1. UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"提示" message:@"這是個提示"delegate:self ca
淺談對Bootstrap的看法之三(提示框和彈出框、滾動監聽、小工具)
1.提示框和彈出框相關說明:提示框和彈出框效果類似。提示框:通過向元素新增 data-toggle="tooltip" 來建立提示框,<a href="#" data-toggle="tooltip" title="我是提示內容!">滑鼠移動到我這</a&g
table裡的cellSpacing用css樣式代替方法
我們做WEB程式開發過程中,經常會為了Table中的cellSpacing,cellpadding等樣式的設定發愁,經常沒有辦法可想了,就會直接在Table中設定cellSpacing,cellpadding了,這樣以後要改頁面風格時,或做多主題風格時,就會發現改起來是多麼的
用css樣式修改input控制元件和button控制元件
input中的text submit button等和單獨button控制元件可以用css修改外觀 eg: <style> .item_submit {background-color:red;width:100px;height:50px;font-siz
CSS樣式的特殊性(權重)
特殊性 有的時候我們為同一個元素設定了不同的CSS樣式程式碼,那麼元素會啟用哪一個CSS樣式呢?我們來看一下面的程式碼:p{color:red;} .first{color:green;} <p class="first">三年級時,我還是一個
用vc怎麼畫旋轉(非線性)橢圓
// Create points to simulate ellipse using beziers//使用貝塞爾曲線建立點,模擬橢圓void EllipseToBezier(CRect& r, CPoint* cCtlPt) // MAGICAL CONSTANT to map ellipse
171026-用for語句畫正方形(2)【連續第三天】
今天是寫總結的第三天(很不容易堅持到今天) 繼昨天的兩次失敗後,有一次進行了新一輪的嘗試,對原有的程式進行了改版; 在重新的試驗後發現,對於for語句還是將其轉化成while語句來理解會更加容易理解; for語句: for(表示式1;表示式2;表示式3) { 迴圈體; }
基於JS和CSS的自動關閉動態提示框
今天有需要一個自動消失的動態提示框元件,在網上搜了一圈,未找到合適的就自已花了點 時間寫了一個,實現思路也許不是最好的,但還是可以給一些拿來主義者使用。由於本機安裝的瀏覽器限制,並未完全測試元件的相容性,僅通過本人安裝了的chrome47、IE11、Edge瀏覽
CSS實現帶箭頭的提示框
我們在很多UI框架中看到帶箭頭的提示框,感覺挺漂亮,但是之前一直不知道其原理,今天網上找了些資料算是弄清楚原理了; 先上效果圖: 原理分析: 上面的箭頭有沒有覺得很像一個三角形,是的,它就是三角形;只不過它這個尖角是通過兩個三角形來實現的; 首先新建一個div,畫出提示
ftk學習記(輸入框篇)
file creat 之前 egl init -s 自己 效果 ast 【 聲明:版權全部。歡迎轉載。請勿用於商業用途。 聯系信箱:feixiaoxing @163.com】 昨天講了進度條,我們還是看看它的運行效果是怎麽樣的。截圖例如以下, 進度條使用的
WinForm中,每隔一段時間(參數)調用一次函數(使用定時器)
pre tick break switch 時間 器) chan pri args 1 System.Windows.Forms.Timer setTimer; //定義一個定時器 2 int flg = 0;
Lync 項目經驗-41-查詢-啟用-Lync-用戶-詳細信息(項目中)
服務器 Lync Get-CSADuser -ou "ou=雲計算(中國)有限公司,dc=i-x-Cloud,dc=com" -Filter {SipAddress -ne $null} | select SamAccountName,DisplayName,MobilePhone,Phone,Sip
字符三角形(循環做法)
~~ AC log 開心 TE n) ios cor com 題目如下: 輸入一個字符,輸入一個整數表示三角形的行數,將三角形打印出來(詳見輸出樣例) 輸入樣例:* 3 輸入樣例: * *** ***** 對!差不多就這樣23333333~~~~~~~~~~~~~~~