用CSS border相关属性画三角形

效果

HTML：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Triangle Demo</title>
<link rel="stylesheet" href="triangle.css">
</head>

<body>
<h3>Down Triangle</h3>
<div class="down-triangle">
</div>

<h3>Up Triangle</h3>
<div class="up-triangle">
</div>

<h3>Left Triangle</h3>
<div class="left-triangle">
</div>

<h3>Right Triangle</h3>
<div class="right-triangle">
</div>
</body>
</html>

CSS：（triangle.css）

.down-triangle {
width: 0;
height: 0;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #dc291e transparent;
}

.up-triangle {
width: 0;
height: 0;
border-width: 0px 10px 10px 10px;
border-style: solid;
border-color: #dc291e transparent;
}

.left-triangle {
width: 0;
height: 0;
border-width: 10px 10px 10px 0px;
border-style: solid;
border-color: transparent #dc291e;
}

.right-triangle {
width: 0;
height: 0;
border-width: 10px 0px 10px 10px;
border-style: solid;
border-color: transparent #dc291e;
}

github链接：https://github.com/kiwiwin/css-demo中triangle-demo

用CSS border相关属性画三角形相关推荐

CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
css文字自动换行及css文字相关属性
white-space: normal; normal:忽略多余的空白,元素内如果有多个空格在一起或换行符(回车键),浏览器会把其看作一个空格来处理,不会影响自动换行(就是元素内容过长,在一行上显示不 ...
css动画相关属性详解
css动画相关属性详解文章目录 css动画相关属性详解什么是CSS动画? 一.@keyframes规则二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
css常用的属性(边框三角形，文本省略号)
文章目录边框列表背景文本显示省略号边框边框相关属性 border-width 边框宽度属性值:length(数值+单位)例如 width:10px border-style 边框样式 ...
边框border相关属性以及其他注意点
一.边框 border 单独设置 border-top:边框的宽度边框的线型颜色:(顺序可以随便调) border-bottom border-left border-right 线型实线 so ...
html笔记（一）html4+css2.0、css基础和属性、盒模型
w3c 官网这里是 html4 的内容大标题小节一.关于HTML 1. 基本语法 2. HTML常用标签 3. 相对路径和绝对路径二.css基础 1. 表单元素 2. 创建样式表 3. cs ...
CSS的zoom属性使用以及其他浏览器不兼容问题
在开发过程中,由于整个页面设计完后效果偏大,于是百度了找到了CSS的相关属性 zoom属性 transform:scale() 这两个都可以使得整个页面进行缩小但是使用transform:scale ...
html5 css 三角形,css怎么画三角形？
css怎么画三角形?下面本篇文章就来给大家介绍一下使用CSS画三角形的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么画三角形? 三角形实现原理:宽度width为0: ...
h5画三角形_如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
【前端：css画三角形】
网上也有各种各样用CSS样式来写三角形的文章,但个人觉的有些乱,本来可能就不明白如何写,可能看完之后和没看是没什么区别的.因此本人在这里写好了方法,希望可以帮助的刚入门的前端工作者 .box{widt ...

用CSS border相关属性画三角形

用CSS border相关属性画三角形相关推荐

最新文章

热门文章