css实现三角,对勾

CSS部分

<style>/* 外框 */#outSide {position: relative;width: 100px;height: 28px;border: 1px solid #999999;text-align: center;line-height: 28px;cursor: pointer;}/* 三角形 */#div6 {position: absolute;right: 0;bottom: 0;width: 0;height: 0;border: 11px solid #CCCCCC;border-left: 11px solid transparent;border-top: 11px solid transparent;}/* 对号 */.check {position: relative;display: inline-block;width: 25px;height: 25px;border-radius: 25px;}.check::after {content: "";position: absolute;left: -2px;top: 0px;width: 40%;height: 22%;border: 2px solid #fff;border-radius: 1px;border-top: none;border-right: none;background: transparent;transform: rotate(-45deg);}</style>

HTML部分

<div id="outSide" onclick="handleBackground()">&yen;100,000<div id="div6"><span class="check"></span></div></div>

JS部分

 <script>function handleBackground() {document.getElementById('outSide').style.cssText = "border: 1px solid #3888FF;"document.getElementById('div6').style.cssText = "border: 11px solid #3888FF; border-left: 11px solid transparent; border-top: 11px solid transparent;"}</script>

css实现三角,对勾相关推荐

css 倒三角_倒三角结构：如何管理大型CSS项目
css 倒三角 by Luuk Gruijs Luuk Gruijs着倒三角结构:如何管理大型CSS项目 (The Inverted Triangle Architecture: how to ma ...
使用css制作三角，兼容IE6，用到的标签divsspan
使用css来制作三角,在日常用得较多.恰好这几天项目中有用到,之前只是从网上copy下来代码直接用,但是今天在用的时候遇到一些问题,于是借此机会把这个css绘制三角好好研究下吧. 我们分别写一个< ...
利用css画三角箭头图标
利用css画三角箭头图标方式单独设置正方形的两条相邻的边框,通过transform的rotate属性值旋转实现箭头图标(注意单位为deg) div {width: 50px;height: 50px ...
html中三角向下符号,使用css实现三角符号效果
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
css怎么设置上三角,如何使用css实现三角符号（附代码）
本篇文章给大家带来的内容是关于如何使用css实现三角符号,代码有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在 ...
html怎么画3角型当背景,纯CSS画三角原理解析
纯CSS画三角原理解析因为之前做一个页面出现了很多三角,开始直接用图片感觉并不是很好用,看着总是怪怪的颜色还很难调整的跟背景一样,就搜了一波代码直接用上了,事后想了一下感觉不知道具体原理是什么,很奇 ...
使用css实现三角符号
关于使用css制作三角符号,网上有很多的例子了,在这里只是为了详细的向各位解释一下三角符号的原理下图,是一个长宽为100px,边框宽度为100px的一个元素,由此可见,在css中上下左右的边框相交处 ...
css实现三角的一些方法
css实现三角没有想象中的那么难,只要明白border的各种属性的意思就很好明白css三角是如何实现的. 一下是几个很简单的例子: css三角形状的制作: css样式: .triangle{ wi ...
css 倒三角_【译】改善 CSS 的 10 个最佳实践
CSS 看起来是一种非常直接且不易犯错的语言.只需要添加规则以对网站进行样式设置就可以了,对吗?对于只需要几个 CSS 文件的小型站点,可能是这种情况.但是在大型程序中,这样可能会使样式迅速失控.如何 ...

css实现三角,对勾

css实现三角,对勾相关推荐

最新文章

热门文章