vue css 实现选中div 边框变色，右下角三角形

vue 文件 + ant 框架实现

<a-row type="flex" justify="space-around" class="paySelect" gutter="[16,16]"><a-col :span="6"><div class="payItem" :class="currentIndex === 0 ? 'active' : ''" @click="currentIndex = 0"><img src="../../../../assets/icons/wechat1.png" alt=""> <span>微信支付</span><div class="selected" v-if="currentIndex === 0"></div></div></a-col><a-col :span="6"><div class="payItem" :class="currentIndex === 1 ? 'active' : ''" @click="currentIndex = 1"><img src="../../../../assets/icons/alipay.png" alt=""> <span>支付宝支付</span><div class="selected" v-if="currentIndex === 1"></div></div></a-col><a-col :span="6"><div class="payItem" :class="currentIndex === 2 ? 'active' : ''" @click="currentIndex = 2"><img src="../../../../assets/icons/unionpay.png" alt=""> <span>银联支付</span><div class="selected" v-if="currentIndex === 2"></div></div></a-col></a-row>

css 部分

 .selected{border-color: red;}.selected:after {content: "";position: absolute;bottom: 0;right: 0;border-bottom: 30px solid red;border-left: 30px solid transparent;}.selected:before {content: '';position: absolute;width: 14px;height: 8px;background: transparent;top: 30px;right: 1px;border: 2px solid white;border-top: none;border-right: none;-webkit-transform: rotate(-55deg);-ms-transform: rotate(-55deg);transform: rotate(-55deg);z-index: 9;}

js 部分

data() {return {currentIndex: 0}},

效果如图：

vue css 实现选中div 边框变色，右下角三角形相关推荐

php里面怎么设置边框颜色,css怎么设置div边框颜色
css设置div边框颜色的方法:首先创建一个HTML示例文件:然后定义一个div:最后通过给该div添加"border-color"或者"border-left-colo ...
html 最小边框宽度,css如何让div边框不占宽度？
HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度呢? 我们做网站时可以添加边框box-sizing属性:让边框不 ...
html怎么能把div宽度占满,css如何让div边框不占宽度？
HTML中,给一个DIV添加一个边框,那么这个DIV的宽度和高度就增加成为这个DIV的宽度加上这个边框的宽度,那么我们如何让边框不占宽度呢? 我们做网站时可以添加边框box-sizing属性:让边框不 ...
Css这是div边框发光过滤动画
.set {border: #c2e9fb 1px solid;box-shadow: rgb(11, 234, 235) 0px 0px 10px inset; // 发光效果transition: ...
html 点击选择变色,css实现选中后变色并且效果不消失
我在vue项目里面.想实现以下效果: css实现选中后变色并且效果不消失. 我用了伪类.点击之后.确实会变色. 但是只是在鼠标点下去那一瞬间会变色. 当鼠标点完之后.效果就消失了. 我的代码: {{ ...
CSS实现鼠标悬停图片时的边框变色效果
CSS实现鼠标悬停图片时的边框变色效果,CSSS双边框,鼠标悬停变色效果,用CSS实现的图片双边框效果,鼠标悬停经过时显示背景色,很简单的效果,网上常见,代码不复杂,用的是一些基本的CSS知识. &l ...
css中textarea去掉边框和取消选中后的边框
css代码: /* 去除边框 */ border: none; resize: none; /* 去除选中后的边框 */ outline:none;
Html字母变大的代码,css鼠标选中字体变大 div css鼠标悬停超链接的文字变大
css鼠标选中字体变大 css鼠标悬停超链接的文字变大 CSS布局鼠标悬停在超链接上字体变大,css实现鼠标经过锚文本文字时改变字体大小篇. 实现这一效果需要的是:hover伪类设置需要字体. 鼠标选 ...
html中div怎么加内边框,css怎么加内边框？
css怎么加内边框?下面本篇文章就来给大家介绍一下使用css加内边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在CSS中,可以使用border属性配合box-sizin ...
在HTML中让边框变透明,如何用CSS设置DIV边框透明
如何实现用CSS设置DIV边框为透明呢?我们来看一看. 工具/材料电脑操作方法 01 透明一般认为是一种颜色属性,但是并没有这个数值.我们找到了一种让div实现透明的最佳方案,运用RGBA 02 ...

vue css 实现选中div 边框变色，右下角三角形

vue css 实现选中div 边框变色，右下角三角形相关推荐

最新文章

热门文章