CSS实现三角形效果
2024-08-26 01:46:12
类似三角形的形状的元素在网页中可能会用到,我们可以用图片或者CSS元素达到我们想要的效果。这里讲一下是讲自己使用HTML+CSS实现三角形的方式。
为了能够熟悉的使用HTML+CSS构建三角形,我们首先要熟悉以下代码以及代码所实现的效果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>shape</title>
<style type="text/css">
.shape{
height: 0;
width: 0;
border-top: 100px solid red;
border-right: 100px solid blue;
border-bottom: 100px solid yellow;
border-left: 100px solid green;
}
</style>
</head>
<body>
<div class="shape"></div>
</body>
</html
这是一个HTML页面,我们定义一个class=shape的元素,为元素设置宽度和高度均为0,上下左右的border为100px并且用不同颜色填充,最终会有以下效果:
可以观察到,上下左右的border都占有45度直角三角形区域,底为100px+100px,高为100px。
如果我们希望实现如下图的三角形形状:
我们可以保留如下图中1或者2的位置:
我选择1区域,最终CSS如下:
.shape01{
height: 0;
width: 0;
border-top: 100px solid transparent;
border-right: 100px solid blue;
}
其他情况类似。
最新文章
- 什么是WebPack,为什么要使用它?
- MySql 插入数据中文乱码
- spring Integration服务总线
- 02-自定义CALayer
- jquery的effect-color对easyui没效果.自己冒险写个边框的颜色闪烁.
- javascripct流程语句
- using namespace cocos2d;
- 写JS自执行函数时要注意的
- ORACLE SEQUENCE的简单介绍
- iOS屏幕适配(尺寸适配)
- FFmpeg编译iOS静态库
- 安卓高级 特效动画ExplosionField和 SmoothTransition
- JS数组reduce()方法详解及高级技巧
- Python课程第三天作业
- jQuery子页面获取父页面元素并绑定事件
- Python正则表达式(regular expression)简介-re模块
- POJ 3436 ACM Computer Factory(最大流+路径输出)
- Windows Server、 Windows 区别
- 前端PHP入门-034-Session技术-掌握级别
- PlSQL Oracle 中的 对应 SQL server 中的 IsNull(Expr1,Expr2)