热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css如何做三角形

css做三角形的方法:首先创建一个div元素,设置div的width和height为0,只用边框宽来填充,边框样式设置为实线“solid”;然后顶部边框设置颜色,剩下的三个边框的颜色设置为透明“transparent”值即可。

css做三角形的方法:首先创建一个div元素,设置div的width和height为0,只用边框宽来填充,边框样式设置为实线“solid”;然后顶部边框设置颜色,剩下的三个边框的颜色设置为透明“transparent”值即可。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

使用CSS画三角形

第一步

首先,先来一个div,然后给这个div加一层border,并且给上下左右border分别加上不同颜色,以便观察,代码和效果如下:

.trangle{
  width: 100px;
  height: 100px;
  border: 100px solid #000;
  border-top-color: red;
  border-bottom-color: yellow;
  border-left-color: blue;
  border-right-color: green;
}

第二步

接着,将这个div的width变为0,我们再来看看效果。可以看到,由于div的宽度变成了0,左右两边的border“吸”在了一起,同时上下的border变成了三角形,好像快要完成了,别急,再看看第三步。

.trangle{
  width: 0px;
  height: 100px;
  border: 100px solid #000;
  border-top-color: red;
  border-bottom-color: yellow;
  border-left-color: blue;
  border-right-color: green;
}

第三步

然后,再将这个div的height变为0,效果如下。我们可以看到,由于div的高度也变成了0,上下两个border也“吸”在了一起,同时上下的border也变成了三角形,到现在为止,四个三角形已经出来了

.trangle{
  width: 0px;
  height: 0px;
  border: 100px solid #000;
  border-top-color: red;
  border-bottom-color: yellow;
  border-left-color: blue;
  border-right-color: green;
}

第四步

最后,就看你想要哪个角啦,想要哪个角就把其余三个border设为透明即可。例如,我想要最上面的三角形,那就把下、左、右设为透明,代码和效果如下:

.trangle{
  width: 0px;
  height: 0px;
  border: 100px solid #000;
  border-top-color: red;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

简化代码

其实,我们不需要把四个border都设置一遍,只需设置你想要画的三角形所涉及到的三条边的border即可。以上步的画最上面的三角形为例,只需设置上、左、右三条边即可,并且要上三角形,就把左右border设为透明,代码和效果如下:

.trangle{
  width: 0px;
  height: 0px;
  border-top: 100px solid red;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

(学习视频分享:css视频教程)

CSS 实现绘制各种三角形(各种角度)

Triangle Up

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

Triangle Down

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

Triangle Left

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

Triangle Right

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

Triangle Top Left

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

Triangle Top Right

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

Triangle Bottom Left

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

Triangle Bottom Right

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

更多编程相关知识,请访问:编程视频!!

以上就是css如何做三角形的详细内容,更多请关注其它相关文章!


推荐阅读
  • 解析 HTTP 头 'Vary: Accept-Encoding' 的作用与重要性
    本文详细探讨了 'Vary: Accept-Encoding' HTTP 头的作用,即指导缓存系统(如代理服务器和 CDN)根据不同的编码需求存储和提供适当的资源版本,确保不同类型的客户端能够接收到适合自己的内容。 ... [详细]
  • 拖拉切割直线 ... [详细]
  • 四月个人任务:Linux基础操作与网络管理
    本文介绍了两项主要任务:编写一个脚本来检测192.168.1.0/24子网中当前在线的IP地址,以及如何在Linux系统中挂载Windows网络共享目录。通过具体步骤和代码示例,帮助读者理解和掌握相关技能。 ... [详细]
  • 本文面向非计算机专业背景的编程爱好者,介绍如何仅使用基础的C语言知识——二维数组和结构体,无需掌握复杂的数据结构如链表,即可编写一款经典的贪食蛇游戏。通过本教程,您将了解游戏开发的基本原理和实现方法。 ... [详细]
  • Python中调用Java代码的方法与实践
    本文探讨了如何在Python环境中集成并调用Java代码,通过具体的步骤和示例展示了这一过程的技术细节。适合对跨语言编程感兴趣的开发者阅读。 ... [详细]
  • VS Code 中 .vscode 文件夹配置详解
    本文介绍了 VS Code 中 .vscode 文件夹下的配置文件及其作用,包括常用的预定义变量和三个关键配置文件:launch.json、tasks.json 和 c_cpp_properties.json。 ... [详细]
  • 本文介绍了在Android Studio中通过代码和配置文件两种方法来移除Activity的标题栏,并讨论了当Activity继承自AppCompatActivity时的特殊处理方法。 ... [详细]
  • 本文详细介绍了如何在Linux系统上安装和配置单节点的Redis服务,包括下载、解压、编译安装以及启动服务的具体步骤。 ... [详细]
  • 本周六上午11点左右到达公司,回顾了一周的行业动态并完成了昨日的任务。下午主要解决了Axis2缓存问题以及DBS和KMS的相关技术难题。由于服务替换导致平台访问错误,经过多方查找未能解决,最终决定暂时搁置。此外,还分享了与朋友之间的沟通障碍及个人成长的思考。 ... [详细]
  • Pandas中使用sort_values方法进行数据排序
    本文介绍了如何利用Python的Pandas库中的sort_values方法对DataFrame对象进行排序。首先通过Numpy库生成随机数据,然后详细解释了DataFrame的创建过程及其参数,并重点探讨了sort_values方法的使用技巧。 ... [详细]
  • Python与Java在Appium中的应用:混合APP自动化测试方法详解
    本文详细探讨了如何使用Python和Java语言结合Appium框架进行混合APP的自动化测试,特别针对面试中常见的问题进行了整理和解答。 ... [详细]
  • 13、单向链表
    头文件:LinkList.hLinkList.cmain.cVS2 ... [详细]
  • UVA 401 - 镜像回文字符串
    本题探讨了如何判断一个字符串是否为普通回文、镜像回文或两者都不是。通过特定的字符映射表来实现字符串的镜像转换,并根据转换后的结果进行分类。 ... [详细]
  • 抽象工厂模式 c++
    抽象工厂模式包含如下角色:AbstractFactory:抽象工厂ConcreteFactory:具体工厂AbstractProduct:抽象产品Product:具体产品https ... [详细]
  • 本文通过一个具体的例子,展示如何利用枚举思想来解决特定的算术表达式构建问题,即通过插入不同的运算符(加、减、乘、除)使给定数字序列满足特定条件。 ... [详细]
author-avatar
漫步乡间2012
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有