CSS实现DIV三角形
本文内容收集来自网络
#triangle-up {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
#triangle-down {
width:;
height:;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
#triangle-left {
width:;
height:;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-right {
width:;
height:;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-topleft {
width:;
height:;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-topright {
width:;
height:;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-bottomleft {
width:;
height:;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-bottomright {
width:;
height:;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
<!-- 外框 -->
<div class="mod-container">
<!-- 小三角部分 -->
<div class="mod-triangle">
<div class="t-border"></div>
<div class="t-inset"></div>
</div>
</div>
/*外框容器*/
.mod-container {
width:100px;
height:60px;
border:1px solid #000;
margin:20px;
background:#fff;
}
/*小三角部分*/
.mod-triangle {
display:block;
position:relative;
left:-23px;
top:18px;
z-index:;
}
.mod-triangle .t-border,
.mod-triangle .t-inset{
left:0px;
top:0px;
width:;
height:;
font-size:;
overflow:hidden;
position:absolute;
border-width:12px;
/*可在此处更改小三角方向:上-右-下-左(solid的位置)*/
border-style:dashed solid dashed dashed;
}
/*小三角的边框,如果不需要,可将颜色值改变*/
.mod-triangle .t-border{
border-color:transparent #000 transparent transparent;
left:-1px;
}
.mod-triangle .t-inset{
border-color: transparent #fff transparent transparent;
}
CSS实现DIV三角形的更多相关文章
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- 通过css实现小三角形
下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...
- css实现圆角三角形例子(无图片)
css实现圆角三角形例子(无图片) 以前我们做圆角时都会要用到图片来实现,今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦,下面我们一起来看看吧. 效果如下图所示 三角形所对方向&q ...
- CSS画一个三角形,CSS绘制空心三角形,CSS实现箭头
壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...
- css控制div的各种形状
css控制div的各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形,从而可以减少图片的使用. 以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可 ...
- 用CSS制做一个三角形!
用CSS制做一个三角形! <style> .outer { width: 0; height: 0; border-left: 10px solid transparent; border ...
- CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
随机推荐
- MVC 5 App 通过 Facebook OAuth2 登陆(Sign-on)的问题
今天做了下MVC 5 App通过Google, Twitter, Linkedin 和 Facebook进行登录的例子, 算是对Asp.net Identity的一个入门,做的过程中发现了如下的问题, ...
- MIPI D-PHY 简写收集
Acronyms APPI Abstracted PHY-Protocol InterfaceBER Bit Error Rate 417 CILControl ...
- ADO数据库链接
一.数据库操作准备 // --------------------------------------------------------------------------------------- ...
- Python切割nginx日志_小组_ThinkSAAS
Python切割nginx日志_小组_ThinkSAAS Python切割nginx日志
- TCP连接建立的三次握手过程可以携带数据吗?
前几天实验室的群里扔出了这样一个问题:TCP连接建立的三次握手过程可以携带数据吗?突然发现自己还真不清楚这个问题,平日里用tcpdump或者Wireshark抓包时,从来没留意过第三次握手的ACK包有 ...
- Windows Live Writer的Markdown插件
我新写了一个Windows Live Writer的Markdown插件,代码放在了github上. 介绍 这个项目是一个Windows Live Writer的Markdown插件.有了这个插件,你 ...
- Java读取WEB-INF目录下的properties配置文件
如何在Java代码中读取WEB-INF目录下的properties配置文件,下文给出了一个解决方案. 我们习惯将一些配置信息写在配置文件中,比如将数据库的配置信息URL.User和Password写在 ...
- 源码解析之–网络层YTKNetwork
首先 关于网络层最先可能想到的是AFNetworking,或者Swift中的Alamofire,直接使用起来也特别的简单,但是稍复杂的项目如果直接使用就显得不够用了,首先第三方耦合不说,就光散落在各处 ...
- Thread Runnable 多线程
1. 实现多线程的两种方法 a) 让这个类继承java.lang.Thread,然后重写run方法 b) 让这个类实现 java.lang.Runnable接口,实现r ...
- 怎样写好一份IT技术岗位的简历
10月是校园招聘的旺季,很多应届毕业生都忙碌起来了,从CSDN笔试-面试文章的火热程度,从我收到的简历就看得出来. 我很久没有参与笔试和面试了,所以只能从“简历”来阐述下我的看法. 截至目前,已经帮8 ...