css 画三角形

CSS三角形绘制方法



#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;
}

 

 

 

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

 

 


#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

 

 


#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

 

 


#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
资源:纯CSS绘制三角形(各种角度)

转载于:https://www.cnblogs.com/xiaochechang/p/5794492.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395252.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql 慢日志报警_一则MySQL慢日志监控误报的问题分析

之前因为各种原因,有些报警没有引起重视,最近放假马上排除了一些潜在的人为原因,发现数据库的慢日志报警有些奇怪,主要表现是慢日志报警不属实,收到报警的即时通信提醒后,隔一会去数据库里面去排查&#xf…

无限复活服务器,绝地求生无限复活模式怎么玩 无限复活新手教程

相信不少的绝地求生玩家们最近都听说了其无限复活模式吧?因此肯定想要知道这种模式究竟该怎么玩,所以下面就来为各位带来此玩法的攻略相关,希望各位在看了如下的内容之后恩呢狗狗了解到新手教程攻略一览。“War”模式的设定以及玩法规则如下&#xff1a…

mysql date time year_YEAR、DATE、TIME、DATETIME和TIMESTAMP详细介绍[MySQL数据类型]

为了方便在数据库中存储日期和时间,MySQL提供了表示日期和时间的数据类型,分别是YEAR、DATE、TIME、DATETIME和TIMESTAMP。下面列举了这些MSL中日期和时间数据类型所对应的字节数、取值范围、日期格式以及零值。从上图中可以看出,每种日期和时…

安装Tengine

1.安装VMware2.安装CentOS6.53.配置网络a.修改 /etc/sysconfig/network-scripts/ifcfg-eth0配置文件,添加如下内容DEVICEeth0HWADDR00:0C:29:96:01:6BTYPEEthernetUUID41cbd943-024b-4341-ac7a-e4d2142b4938ONBOOTyesNM_CONTROLLEDyesBOOTPROTOnoneIPADDRxxx.xxx.x.xxx#例如:IP…

【OCR技术系列之八】端到端不定长文本识别CRNN代码实现

CRNN是OCR领域非常经典且被广泛使用的识别算法,其理论基础可以参考我上一篇文章,本文将着重讲解CRNN代码实现过程以及识别效果。 数据处理 利用图像处理技术我们手工大批量生成文字图像,一共360万张图像样本,效果如下:…

杜比服务器系统安装教程,win10杜比音效如何安装?win10安装杜比音效的详细教程...

杜比音效想必大家都不陌生,听歌或者看电影开启杜比音效可以给人一种身临其境的感觉。不少朋友都升级了win10系统却不知道如何安装杜比音效?如何为自己的系统安装杜比音效呢?感兴趣的小伙伴请看下面的操作步骤。win10安装杜比音效的方法&#…

前端if else_应该记录的一些项目代码(前端)

1.共享登录(单点登录)主要是前端部分主要是根据是否有cookie来判断是否已经登录主系统,然后再根据是否有当前系统的登录信息来(这块主要是sessionStorage做的)判断是否要再登录当前系统。设置、读取和设置cookie的方法…

Mac端解决(含修改8.0.13版的密码):Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)...

1. 安装mysql但是从来没启动过,今天一启动就报错: Cant connect to local MySQL server through socket /tmp/mysql.sock (2) 其实是mysql服务没起来。。。 localhost:~ miaoying$ mysql.server start Starting MySQL ... SUCCESS! 然后再去sudo mysql就…

塔塔建网站服务器,塔塔帝国忘记哪个区怎么办

7条解答1.在哪个区玩战舰帝国忘记了怎么办?忘了的话可以去官网登陆看看自己的 充值 或者礼包记录 有没有对应的区服 或者电话联系问问客服 通过账号 角色名字来查询2.我忘记在哪个区怎么找如果你有游戏人生资格的话,就很容易找了,在游戏人生的个人主页里…

Ixia推出首款太比特级网络安全测试平台

2016年11月18日,Ixia宣布推出全新CloudStorm平台。作为首款太比特级网络安全测试平台,该平台拥有前所未有的非凡性能,可用于测试及验证超大规模云数据中心不断扩大的容量、效率以及弹性。 ▲Ixia CloudStorm安全测试平台 CloudStorm的正式面市…

服务器选择重装系统,云服务器重装系统选择

云服务器重装系统选择 内容精选换一换将外部镜像文件注册成云平台的私有镜像后,您可以使用该镜像创建新的云服务器,或对已有云服务器的系统进行重装和更换。本节介绍使用镜像创建云服务器的操作。您可以按照通过镜像创建云服务器中的操作指导创建弹性云服…

Gartner Q2服务器市场报告5大要点

服务器场景调查 根据市场研究公司Gartner的调查报告,第二季度Dell的服务器市场取得了丰富的成果,HPE的市场份额比去年同期略有下降,但仍保留了其全球服务器市场第一的位置。 Gartner表示,全球服务器销售收入在第二季度与去年同期相…

力扣——键盘行

给定一个单词列表,只返回可以使用在键盘同一行的字母打印出来的单词。键盘如下图所示。 示例: 输入: ["Hello", "Alaska", "Dad", "Peace"] 输出: ["Alaska", "Dad"]注意: 你可…

Jmeter 通过json Extracted 来获取 指定的值的id

在没有 精确或模糊查询的接口时可以使用jmeter 获取指定的值的ID import java.lang.String ; String getTargetName"iphone632g"; //判读相应结果中是否包含指定值:iphone632g boolean containsCategoryprev.getResponseDataAsString().contains(getTarge…

Do you have an English name? 你有英文名吗?

文中提到的所有人名都是虚构的,如有雷同,纯属巧合。当然,你的洋名儿也可能是德文、法文、意大利文,等々々々。 全球化时代,和老外的交流也多了。“高端”的程序员想要进欧美系外企,想要出国看世界&#xff…

网络安全不是奢侈品,而是必需品

2016年国家网络安全宣传周于9月19日至25日在武汉隆重举办。《长江日报》记者高萌采访了思科全球副总裁、大中华区首席技术官曹图强,以下是9月19日《长江日报》刊登的采访全文: 思科全球副总裁、大中华区首席技术官曹图强昨日下午,思科全球副总…

AS 自定义 Gradle plugin 插件 案例 MD

Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱MyAndroidBlogsbaiqiantaobaiqiantaobqt20094baiqiantaosina.comAS 自定义 Gradle plugin 插件 案例 MD 目录 目录AS 中自定义 Gradle plugin编写插件传递参数发布插件到仓库使用插件AS 中自定义 Gradle plugin 参考1 参…

中英文对照 —— 机械

0. 汽车 relay:继电器,clutch:离合; motor:发动机(马达);档位: park:停车挡braking:制动(也就是刹车)空挡:neu…

机票垂直搜索引擎的性能优化

机票垂直搜索引擎的性能优化 原文:机票垂直搜索引擎的性能优化一、行业背景与垂直搜索我们先了解一下机票的行业背景,下图是由中航信统计的数据,蓝色的曲线代表平均每公里的票价,红色曲线指的是客运量。从2011年到2016年,无论是国…

Unity3D 装备系统学习Inventory Pro 2.1.2 基础篇

前言 前一篇 Unity3D 装备系统学习Inventory Pro 2.1.2 总结 基本泛泛的对于Inventory Pro 这个插件进行了讲解,主要是想提炼下通用装备系统结构和类体系。前两天又读了另一个插件 C# Inventory-uGui v2.0.1的源码(应该也是老外写的)&#xf…