<!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. 网页三剑客之HTML

    Web服务本质 import socket def handle_request(client): request_data = client.recv(1024) print(request_dat ...

  2. 第十一节: EF的三种模式(一) 之 DBFirst模式(SQLServer和MySQL两套方案)

    一. 简介 EF连接数据库有三种模式,分别是DBFirst.ModelFirst.CodeFirst,分别适用于不同的开发场景. 该章节,将主要介绍EF的DBFirst连接SQLServer数据库和M ...

  3. SpringBoot系列: 所有配置属性和官方文档

    Spring Boot 通用配置参数https://docs.spring.io/spring-boot/docs/current/reference/html/common-application- ...

  4. Design Principles and Design Patterns

    设计原则解读. 设计原则是对设计模式的约束性要求,属于设计中基本的四项特征,不符合此四项特征的设计,不具有生命力. 设计模式也是在此四项设计原则上的具体化实例化衍生物. Martin原文: http: ...

  5. XSS攻击常识及常见的XSS攻击脚本汇总

    一.什么是XSS? XSS全称是Cross Site Scripting即跨站脚本,当目标网站目标用户浏览器渲染HTML文档的过程中,出现了不被预期的脚本指令并执行时,XSS就发生了. 这里我们主要注 ...

  6. safari中input、textarea无法输入的问题

    网址:https://www.cnblogs.com/xiayu25/p/6832748.html * { -webkit-box-sizing: border-box; -moz-box-sizin ...

  7. javascript基础 之 代码规范

    1,变量名 1,变量名推荐使用小驼峰写法:类似于:firstName 2,全局变量和常量建议用大写:PI 3,支持下划线 2,缩进 1,一般使用4个空格当作缩进,tab建议少用 2,运算符左右和左花括 ...

  8. dubbo负载均衡与集群集群容错

    1.负载均衡 在集群负载均衡时,Dubbo 提供了多种均衡策略,缺省为 random 随机调用. 1.  负载均衡策略 Random LoadBalance 随机,按权重设置随机概率.(默认值)在一个 ...

  9. Django之Model

    一.字段 常用字段: AutoField:int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. IntergerField:一个 ...

  10. 【原创】算法基础之Anaconda（1）简介、安装、使用

    Anaconda 2 官方:https://www.anaconda.com/ 一 简介 The Most Popular Python Data Science Platform Anaconda® ...