<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>三角形</title>

    <style>
        div{

            width:0;height:0;

            border: 20px solid;

            /*平分效果*/

            border-color:red green blue black;

            /*单个三角形*/

            /*border-color:transparent transparent lightgreen transparent;*/

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>


　/* 向上的箭头 */

　.dot-top {

　　　position: relative;

　　　top: 21px;

　　　left: 3rem;

　　　font-size: 0;

　　　line-height: 0;

　　　border: 10px dashed #eeeeee;

　　　border-top-width: 0;

　　　border-right-color: transparent;

　　　border-bottom-style: solid;

　　　border-left-color: transparent;

　　}

　

　/* 向下箭头旋转-展开内容 */ 

　　i{

　　　　width: .14rem;

　　　　height: .08rem;

　　　　background: url('../images/down@2x.png') no-repeat center;

　　　　background-size: 100% 100%;

　　　　transition: transform 0.3s ease;

　　　　-moz-transition: -moz-transform 0.3s ease;

　　　　-webkit-transition: -webkit-transform 0.3s ease;

　　　　-o-transition: -o-transform 0.3s ease;

　　}

　　.up {

　　　　transform: rotate(180deg);

　　　　-webkit-transform: rotate(180deg);

　　　　-moz-transform: rotate(180deg);

　　　　-o-transform: rotate(180deg);

　　}

　　

css 绘制三角形的更多相关文章

  1. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  3. CSS学习笔记（8）--纯CSS绘制三角形（各种角度）

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  4. CSS绘制三角形和箭头，不用再用图片了

    前言 还在用图片制作箭头,三角形,那就太lou了.css可以轻松搞定这一切,而且颜色大小想怎么变就怎么变,还不用担心失真等问题. 先来看看这段代码: /**css*/.d1{ width: 0; he ...

  5. CSS绘制三角形和箭头

    <html> <head> <meta charset="utf-8"> <title>CSS绘制三角形和箭头</title& ...

  6. 用CSS绘制三角形

    其实用HTML CSS绘制三角行 是非常简单的 ,我在网上看了不少人写的博客,里面写的好复杂样子,反正我是看的云里雾里的,说实话是挺简单的. 首先提出一段代码: <!DOCTYPE html&g ...

  7. 纯Css绘制三角形箭头三种方法

    在制作网页的过程中少不了绘制类似图片的三角形箭头效果,虽然工程量不大,但是确实麻烦.在学习的过程中,总结了以下三种方法,以及相关的例子. 一.三种绘制三角形箭头方法 1.方法一:利用overflow: ...

  8. CSS绘制三角形的原理剖析

    今天学习Bootstrap时候,看到按钮的向下三角形源码: .caret { display: inline-block; ; ; margin-left: 2px; vertical-align: ...

  9. 纯CSS绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  10. 纯CSS绘制三角形（各种角度）类似于使用字符画法，根据位移不同，也可以使用两个元素画出三角边框

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. Numpy系列（一）- array

    初始Numpy 一.什么是Numpy? 简单来说,Numpy 是 Python 的一个科学计算包,包含了多维数组以及多维数组的操作. Numpy 的核心是 ndarray 对象,这个对象封装了同质数据 ...

  2. React 记录(6)

    React文档:https://www.reactjscn.com/docs/react-component.html 慢慢学习:对照教程文档,逐句猜解,截图 React官网:https://reac ...

  3. JaVa第二周学习总结

    第一周学习的时候上传图片用的是网站外链然后导致出现了极为尴尬的情形...然后我就把第一周的全改成本地上传了. 首先列出所做任务 1 安装IDEA 2学习二三章视频,课本 3调试代码,上传码云 4总结问 ...

  4. [物理学与PDEs]第5章习题4 广义 Hookean 定律的张量的对称性

    设材料是超弹性的, 并设参考构形为自然状态, 证明由线性化得到的张量 ${\bf A}=(a_{ijkl})=\sex{2\cfrac{\p \bar p_{ij}}{c_{kl}}}$ 具有以下的对 ...

  5. Windows系统盘符错乱导致桌面无法加载。

    问题如下 : 同事有台笔记本更换SSD硬盘,IT职员帮他将新硬盘分好区后再将系统完整Ghost过来,然后装到笔记本上.理论上直接就可以使用了!但结果开机后登陆用户桌面无法显示,屏幕黑屏什么都没有. 问 ...

  6. SQL Server安全

    第一篇 SQL Server安全概述 第二篇 SQL Server安全验证 第三篇 SQL Server安全主体和安全对象 第四篇 SQL Server安全权限 第五篇 SQL Server安全架构和 ...

  7. 在GridView中使用FindControl

    DataRowView dv =(DataRowView)e.Row.DataItem;string id=dv.Row["ProjectID"].ToString(); 1.在行 ...

  8. SpringBoot使用Redis共享用户session信息

    SpringBoot引入Redis依赖: <dependency> <groupId>org.springframework.boot</groupId> < ...

  9. [Kubernetes]如何让集群为我们工作?

    前一段时间倒腾k8s的时候,写了一系列的博客,有很多人不理解那样做的意义是什么,为什么要那样做,这篇文章就尝试解释一下,在实际环境中,是如何让集群为我们工作的. 因为只研究了一个月左右的时间,认识难免 ...

  10. Laravel -- 邮箱功能配置问题

    ```` 今天碰到了这块的问题,还是记一下 ```` 关于邮箱: 品牌:腾讯qq.网易163 等 种类:个人.企业 邮箱服务器种类 配置教程 https://jingyan.baidu.com/art ...