使用CSS制作小三角形实际就是通过控制块元素的边框来实现的。
例如：
<style>
triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
</style>
<div class='triangle-down'></div> <!--向下三角形-->
<div class='triangle-up'></div> <!--向上三角形-->
<div class='triangle-left'></div> <!--向左三角形-->
<div class='triangle-right'></div> <!--向右三角形-->
原理就是设置块元素的三条边透明掉（tranparent）
可以加，比如之际在上直接写样式，如<img src="Bgpng" width="10" height="10" style="样式" />
或者在样式表里定义如
<div class="Bg"><img src="Bgpng" width="10" height="10" /></div>
Bg img{样式}
为元素设置边框
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
可选值：
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
示例:
边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
首先这个应该是一个插件写的开关。当然使用原生也是可以写的。
先写一个按钮，然后通过js的点击事件来设置它，通过获取dom来改变它的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>test</title>
<style type="text/css">
box{
width:100%;
background-color: #e4963c;
text-align: center;
}
btn{
width:60px;
margin:50px 0;
border-radius: 50px;
background-color: #60b979;
border:none;
outline: none;
padding:5px 0;
position: relative;
}
box-i{
display: block;
border-radius:100%;
background-color: #fff;
position: absolute;
top:50%;
right:11%;
width:20px;
height:20px;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="box">
<button class="btn on" id="btn">是 否<i class="box-i" id="box-i"></i></button>
</div>
<script type="text/javascript">
windowonload = function(){
var btn = documentgetElementById('btn');
var boxi = documentgetElementById('box-i');
btnonclick = function(){
if(btnclassListcontains('on')){
btnclassListremove('on');
btnstylecssText='background:#ccc;'
boxistylecssText='left:11%;'
}else{
btnclassListadd('on');
btnstylecssText='background:#60b979;'
boxistylecssText='right:11%;'
}
}
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：表白网
微信扫一扫
支付宝扫一扫
评论列表（0条）