css偽類 右下角點擊出現(xiàn) 對號角標表示選中的示例代碼
發(fā)布時間：2020-06-22 17:07:56 作者：積極的小可愛呀 
我要評論
我要評論這篇文章主要介紹了css偽類 右下角點擊出現(xiàn) 對號角標表示選中，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
效果：
css:
.s_type {
border: none;
border-radius: 5px;
background-color: #f3f3f3;
padding: 7px 0;
color: #606266;
margin: 5px 2.5% 5px 0;
width: 30%;
position: relative;
}
.selecd {
background-color: #ebf3ff;
color: #5999fc;
}
.select {
background-color: #ebf3ff;
color: #5999fc;
}
.select:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
border: 9px solid #5999fc;
border-top-color: transparent;
border-left-color: transparent;
}
html:
<button class="s_type">全部</button> <button class="s_type">2020年夏季</button>
js:
$(’.s_type’).on(‘click’,function(){
$(this).toggleClass(‘select’);
});
1：設計好按鈕本身的樣式(.s_type）
2:將要加的樣式另寫一個類名（.selecd ）
3：通過點擊事件將元素添加樣式
剛開始想過挺多方法的，比如直接在偽類里content: ‘✔’;但這樣的話出的效果就是對號沒有背景顏色，直接白了一塊，這樣不行。還想到要不直接把UI的圖摳出來，當背景或者圖片直接浮在按鈕上面，后面想想這樣不太對。然后我就先去做別的功能，把其他功能寫出來再弄這個。就剛好看到一篇文章跟我需要的功能一樣，就直接按照這篇博客寫了。。。然后效果出來了哈哈哈哈
后面去看UI庫之類的發(fā)現(xiàn)QQ的UI庫還有專門角標設計（地址）
附錄：下面看下css 選中框樣式
在項目中經常會用到下圖樣式的選中樣式
在網上找了一下，思路其實就是對矩形進行變形處理，通過偽元素實現(xiàn)下標 css樣式：
.select {
position: relative;
width:81px;
height:93px;
margin: 0 auto;
text-align: center;
line-height: 93px;
color: #4ABE84;
background-color: #fff;
box-shadow:0px 2px 7px 0px rgba(85,110,97,0.35);
border-radius:7px;
border:1px solid rgba(74,190,132,1);
}
.select:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
border: 17px solid #4ABE84;
border-top-color: transparent;
border-left-color: transparent;
}
.select:after {
content: '';
width: 5px;
height: 12px;
position: absolute;
right: 6px;
bottom: 6px;
border: 2px solid #fff;
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(45deg);
}
然后是我們通過使用div來展示效果：
<div class="select">測試</div>
完成。
到此這篇關于css偽類 右下角點擊出現(xiàn) 對號角標表示選中的示例代碼的文章就介紹到這了,更多相關css右下角對號角標內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇文章主要為大家介紹了CSS實現(xiàn)帶倒三角標記的WEB標準菜單效果代碼,通過純css實現(xiàn)鼠標滑過呈現(xiàn)倒三角標記的顯示效果,非常簡單實用,需要的朋友可以參考下2015-10-12
CSS教程:可擴展圓角標簽的實現(xiàn)方法-CSS教程-網頁制作-網頁教學網
在制作網頁的時候，很流行使用標簽的方式進行分類顯示，圓角標簽具有樣式美觀、表現(xiàn)方式形象的優(yōu)點，一般我們都會將圓角標簽的背景制作成一張圖片，這樣做的不足之處是如2008-10-17
這篇文章主要介紹了CSS 實現(xiàn)角標效果,分為圓角矩形和三角形，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-28
