纯css画直角三角形
所有的三角形，都是通过盒子模型来设定。
border（边框）的不同大小来决定
border-width: 边框的宽度
border-style: 边框的样式
border-color: 边框的颜色
1：2个颜色
<!DOCTYPE html>
<html>
<head>
<title>css的直角三角形</title>
<style type='text/css'>
.content-trigon-zhijiao {
width: 0px;
height: 0px;
border-color: red blue blue red;
border-width: 50px 50px 50px 50px;
border-style: solid;
}
</style>
</head>
<body>
<div class="title-trigon-zhijiao">css的直角三角形</div>
<div class="content-trigon-zhijiao">
<span><i></i></span>
</div>
</body>
</html>
2：
3：
4：
5：
6：
盒子模型：
可以参考：
以下是比较全面的css绘制的图形：
https://css-tricks.com/examples/ShapesOfCSS/
纯css画直角三角形的更多相关文章
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 【原创】纯CSS画黄金梅丽号！
代码如下 <!DOCTYPE html> <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAni ...
- 纯CSS画的基本图形
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
- 用纯CSS画大白
纯CSS打造网页大白知识点: 首先要把大白分割,整体baymax中包含header(eye1,eye2,mouth),torso(heart),belly(cover),l-bigfinge ...
- 纯css 画气泡
我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一 ...
- 理解纯CSS画三角形
pure css draw a triangle code { display: inline-block; width: 300px; background-color: #E0E0E0 } .te ...
- 8.17 纯css画一个着重号图标
今天看到一个同事写的着重号图标,我以为是图片,仔细一看,是span标签!哇!!学习一下哈哈 图标长这样: CSS代码: .hint{ display: inline-block; width: 20p ...
随机推荐
- AtomicInteger学习
面试时被问到了,补下 import java.util.concurrent.atomic.AtomicInteger; /** * Created by tzq on 2018/7/15. */ p ...
- Vivado怎么使用In system debug(类似于chipscope的东西)
流程 1.建立好工程后,首先设置综合选项为保留设计的层次结构,方便追查信号.
- Java【第六篇】面向对象基础
类和对象 面向对象的概念 面向过程 核心是过程二字,过程指的是解决问题的步骤,设计一条流水线,机械式的思维方式: 面向对象 核心就是对象二字,对象就是特征与技能的结合体,利用“类”和“对象”来创建各种 ...
- Spring Boot的事务处理
spring boot大大简化了之前java项目需要在配置xml里设置很多繁琐的内容. 设置数据源和配置事务 @Bean(name = "masterDataSource") @P ...
- python中assert()函数的使用
关于assert()函数的使用,主要参考博客https://blog.csdn.net/qq_37119902/article/details/79637578 assert函数主要是用来声明某个函数 ...
- Eclipse 添加 Source 源代码、Javadoc 文档
源代码 Source 按住 Ctrl 键,鼠标放到对应的类.方法上,出现 Open Declaration,Open Implementation ,可查看对应的实现.声明源代码. 也可以在[Proj ...
- Linux Centos7.x下安装部署Jira和confluence以及破解方法详述
简述 JIRA是Atlassian公司出品的项目与事务跟踪工具,被广泛应用于缺陷跟踪.客户服务.需求收集.流程审批.任务跟踪.项目跟踪和敏捷管理等工作领域. Confluence是一个专业的企业知识管 ...
- CopyOnWriteArrayList真的完全线程安全吗
我之前书上看到的说法是:Vector是相对线程安全,CopyOnWriteArrayList是绝对线程安全 这种说法其实有些问题,CopyOnWriteArrayList在某些场景下还是会报错的 Co ...
- 第十四节: EF的三种模式(四) 之 原生正宗的 CodeFirst模式的默认约定
一. 简介 1. 正宗的CodeFirst模式是不含有edmx模型,需要手动创建实体.创建EF上下文,然后生成通过代码来自动映射生成数据库. 2. 旨在:忘记SQL.忘记数据库. 3. 三类配置:On ...
- 使用Jenkins docker镜像运行Jenkins服务
需求 使用docker技术管理Jenkins服务器.避免多次部署需要重复安装的重复工作,且可以方便迁移到新的服务器. Jenkins docker镜像 https://hub.docker.com/_ ...