<html>
<body>
<style>
.trlangle{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style> <div class="trlangle"></div>
</body>
</html>

2.

<html>
<body>
<style>
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黄*/
position:absolute;
top:0px;
left:0px;
}
</style> <div class="triangle_border_up">
<span></span>
</div>
</body>
</html>

用css做三角形的更多相关文章

  1. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  2. css做三角形

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 纯css做三角形形状

    /* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:5px solid tra ...

  4. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  5. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  6. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  7. 7件你不知道但可以用CSS做的事

    不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如 ...

  8. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  9. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

随机推荐

  1. Scrapy框架的简单使用

    一.安装依赖 #Windows平台 1.pip3 install wheel 3.pip3 install lxml 4.pip3 install pyopenssl 5.pip3 install p ...

  2. 【Visio流程图】借助redis来实现数据即时刷新

    [需求:]数据从竞品网站爬过来,经过分析处理之后,把结果通过网页实时反馈给业务人员. [应用:]2个应用: 一个是爬取数据的应用:不断从竞品网站爬数据,每次爬到的数据为一批.然后,对每一批爬到的数据进 ...

  3. iOS中点击按钮复制指定内容

    话不多说,直接上图和代码:

  4. android 对于asset和raw下文件的操作

    Android 中资源分为两种,一种是res下可编译的资源文件, 这种资源文件系统会在R.Java里面自动生成该资源文件的ID,访问也很简单,只需要调用R.XXX.id即可;第二种就是放在assets ...

  5. cookie,webstorage的理解

    在前两天的开发时,遇到一个问题,需要将一个网页在预加载时,优先出一个弹出框,但是再次加载时不希望它出现,在经过一段时间的搜索和尝试之后,发现了大多使用的两种方式:生成cookie和webStorage ...

  6. Under what conditions should the 'start_udev' command be run?

    环境 Red Hat Enterprise Linux 问题 We run start_udev as part of the storage allocation procedure that we ...

  7. docker 无法启动

    背景:想修改docker0的ip地址,所以在/etc/docker/daemon.json文件里加了[bip]. { "registry-mirrors": ["http ...

  8. ArrayList的输出以及一些问题

    //首先需要创建一个ArrayList ArrayList arr=new ArrayList(); //然后往ArrayList里面插入一些值 arr.add("a"); arr ...

  9. 201871010111-刘佳华《面向对象程序设计(java)》第一周学习总结

    <面向对象程序设计(java)>第一周学习总结 正文开头: 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 ...

  10. 2019 SDN上机第6次作业

    2019 SDN上机第6次作业 1.实验拓扑 (1)实验拓扑 (2)使用Python脚本完成拓扑搭建 from mininet.topo import Topo from mininet.net im ...