CSS使用border边框制作各种各样的三角形
时间:2017-03-31
css border用于设置html元素的边框样式,除了设置元素的边框外,CSS使用border还可以制作出各种各样的三角形,本文章向大家分享CSS使用border边框制作三角形的源代码,需要的朋友可以参考一下。
CSS使用border边框制作各种各样的三角形,源代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>读取本地文件</title>
<style type="text/css">
body{
margin:0;
}
#container{
width:1000px;
margin:50px auto;
}
#controller{
width:400px;
height: auto;
float: left;
border: 2px solid #D4D4D4;
padding:10px;
}
dl{
height: 60px;
}
dt{
margin-bottom: 10px;
font-weight: bold;
display: inline-block;
float: left;
margin-right: 10px;
}
dd{
float: left;
padding-left: 0;
margin-left:10px;
position: relative;
top:-12px;
}
.radios{
display:inline-block;
padding:5px 8px;
background:#FFF;
border:2px solid #D4D4D4;
cursor:pointer;
margin-right: 5px;
margin-top:5px;
min-width:70px;
text-align:center;
}
.radios.current,.radios:hover,.radios.current:hover{
border:2px solid #3B94C7;
color:#3B94C7;
background:#EEEEEE;
position: relative;
}
.radios:hover{
border-color: #D4D4D4;
}
.radios.current:before{
content :'';
width:0;
height:0;
position:absolute;
left:-1px;
top:-1px;
border-left:10px solid #3B94C7;
border-bottom:10px solid rgba(0,0,0,0);
border-right:none;
}
.radios.current:after{
content :'';
width:0;
height:0;
position:absolute;
right:0;
bottom:0;
border-right:4px solid #3B94C7;
border-bottom:4px solid #3B94C7;
border-left:4px solid rgba(0,0,0,0);
border-top:4px solid rgba(0,0,0,0);
}
#box{
float: left;
margin-left: 200px;
margin-top:100px;
}
#tipwapper{
border:1px solid #EEEEEE;
position: relative;
width:100px;
height: 100px;
}
#tip{
display: inline-block;
width:0;
height: 0;
border:50px solid #3B94C7;
position: absolute;
}
textarea{
width:350px;
height: 150px;
resize:none;
border:2px solid #D4D4D4;
padding:10px;
}
h1{
color: #DD5500;
font-family: "Microsoft Yahei"
}
</style>
<script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
</head>
<body>
<div id="container">
<h1>通过CSS边框画三角形</h1>
<div id="controller">
<dl>
<dt>左边框</dt>
<dd class="radios radio1" data-id="1">透明边框</dd>
<dd class="radios radio1" data-id="2">无边框</dd>
<dd class="radios radio1 current" data-id="3">有边框</dd>
<dd><input type="hidden" id="left" value="3"/></dd>
</dl>
<dl>
<dt>上边框</dt>
<dd class="radios radio2" data-id="1">透明边框</dd>
<dd class="radios radio2" data-id="2">无边框</dd>
<dd class="radios radio2 current" data-id="3">有边框</dd>
<dd><input type="hidden" id="top" value="3"/></dd>
</dl>
<dl>
<dt>右边框</dt>
<dd class="radios radio3" data-id="1">透明边框</dd>
<dd class="radios radio3" data-id="2">无边框</dd>
<dd class="radios radio3 current" data-id="3">有边框</dd>
<dd><input type="hidden" id="right" value="3"/></dd>
</dl>
<dl>
<dt>下边框</dt>
<dd class="radios radio4" data-id="1">透明边框</dd>
<dd class="radios radio4" data-id="2">无边框</dd>
<dd class="radios radio4 current" data-id="3">有边框</dd>
<dd><input type="hidden" id="bottom" value="3"/></dd>
</dl>
<textarea id="input" readonly></textarea>
</div>
<div id="box">
<div id="tipwapper">
<div id="tip"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(".radios").each(function(){
$(this).click(function(){
// if($(this).hasClass("current")){
// $(this).removeClass("current");
// callback(null);
// return;
// }
$(this).parent().find(".radios").removeClass("current");
$(this).addClass("current");
$(this).parent().find("input").val($(this).data("id"));
change();
});
});
function change(){
var color = "50px solid #3B94C7";
var transparent = "50px solid rgba(0,0,0,0)";
var leftVal = $("#left").val();
var input = "";
var leftBorder = "";
if(leftVal==1){
leftBorder = transparent;
}
else if(leftVal==2){
leftBorder = "none";
}
else if(leftVal==3){
leftBorder = color;
}
$("#tip").css("border-left",leftBorder);
input += "border-left:"+ leftBorder + "\n";
var topVal = $("#top").val();
var topBorder = "";
if(topVal==1){
topBorder = transparent;
}
else if(topVal==2){
topBorder = "none";
}
else if(topVal==3){
topBorder = color;
}
$("#tip").css("border-top",topBorder);
input += "border-top:"+ topBorder + "\n";
var rightVal = $("#right").val();
var rightBorder = "";
if(rightVal==1){
rightBorder = transparent;
}
else if(rightVal==2){
rightBorder = "none";
}
else if(rightVal==3){
rightBorder = color;
}
$("#tip").css("border-right",rightBorder);
input += "border-right:"+ rightBorder + "\n";
var bottomVal = $("#bottom").val();
var bottomBorder = "";
if(bottomVal==1){
bottomBorder = transparent;
}
else if(bottomVal==2){
bottomBorder = "none";
}
else if(bottomVal==3){
bottomBorder = color;
}
$("#tip").css("border-bottom",bottomBorder);
input += "border-bottom:"+ bottomBorder + "\n";
$("#input").val(input);
}
change();
</script>
</body>
</html>
- mysql数据迁移hbase问题
- hbase问题总结
- mysql DUPLICATE KEY UPDATE 问题
- mysql复制学习二 安装及首次复制配置
- 关于操作权限
- hadoop loadBalance源码分析
- writeup | 应该不是 XSS
- Hbase 源码分析之 Get 流程及rpc原理
- MOCTF WEB 题解
- HBase行锁与MVCC分析
- HBase行锁探索
- Spring Cloud构建微服务架构:分布式服务跟踪(抽样收集)【Dalston版】
- HBase client访问ZooKeeper获取root-region-server DeadLock问题(zookeeper.ClientCnxn Unable to get data of zn
- zookeeper学习系列:四、Paxos算法和zookeeper的关系
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- OpenCV图像处理笔记(二):图片操作进阶
- OpenCV图像处理笔记(一):图片基本操作
- BigData--Hadoop2.x新特性之HA
- 前端踩坑系列《四》
- BigData--Hadoop技术
- TensorFlow2.X学习笔记(8)--TensorFlow高阶API之构建模型、训练模型
- dotnet 使用 AsyncQueue 创建高性能内存生产者消费者队列
- TensorFlow2.X学习笔记(7)--TensorFlow中阶API之losses、metrics、optimizers、callbacks
- 前端须知的 Cookie 知识小结
- TensorFlow2.X学习笔记(6)--TensorFlow中阶API之特征列、激活函数、模型层
- sortable.js——Vue 数据更新问题
- 【项目实战】环境搭建
- TensorFlow2.X学习笔记(5)--TensorFlow中阶API之数据管道
- TensorFlow2.X学习笔记(4)--TensorFlow低阶API之AutoGraph相关研究
- TensorFlow2.X学习笔记(3)--TensorFlow低阶API之张量