要实现三角的效果有很多方法：

例如下面的页面就需要三角：

其中，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        div{

            width: 0;

            height: 0;

            border-top: 10px solid transparent;

            border-left: 10px solid transparent;

            border-right: 10px solid transparent;

            border-bottom: 10px solid skyblue;

        }

    </style>

</head>

<body>

    <div></div>

</body>

</html>

最后通过定位的方法放到合适的位置

CSS-画三角的更多相关文章

  1. css画三角的原理

    当我们设置一个div其width与height为100px,并且设置其四边框的宽度为100px,且分别设置其颜色后,我们可以看到如下的一张图片 此时如果设置这个div的height为0的话,其他不变, ...

  2. 用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  3. 如何用css画出三角形

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  4. 用css画出三角形【转】

    看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...

  5. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  6. 用div画三角/矩形/圆

    1. 画三角 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  7. 用CSS画基本图形

    用CSS画基本图形 1.正方形 代码如下: #square { width: 100px; height: 100px; background: red; } 2.长方形 代码如下:   #recta ...

  8. CSS画一个三角形，CSS绘制空心三角形，CSS实现箭头

     壹 ❀ 引 这两天因为项目工作较少,闲下来去看了GitHub上关于面试题日更收录的文章,毕竟明年有新的打算.在CSS收录中有一题是 用css创建一个三角形,并简述原理 .当然对于我来说画一个三角形是 ...

  9. 使用css制作三角

    1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...

  10. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

随机推荐

  1. Python 中的运算符

    1.算数运算符 + 加 - 减 * 乘 计算字符串重复的次数 print("唯美" * 10) / 除 round(10/3, 4)   4代表位数 // 取整数 % 取余数 ** ...

  2. python 将值相同的key分组的方法

    方法一: 使用 itertools.groupby() rows = [ {'address': '5412 N CLARK ', 'date ': '07/12/2012 ’ }, {'addres ...

  3. js 实现音频播放与暂停

    html: <script src="js/jquery-2.1.3.min.js"></script> <div id="soundIco ...

  4. vue elment.style样式修改（第三方组件自生成元素）

    参考:https://blog.csdn.net/dcxia89/article/details/80402490         https://blog.csdn.net/jianglibo102 ...

  5. hadoop2.x 完全分布式详细集群搭建(图文：4台机器)

    在准备之前说一下本次搭建的各节点角色,进程. nameNode 进程:NameNode dataNode  进程:DataNode resourceManager :ResourceManager n ...

  6. Leetcode950. Reveal Cards In Increasing Order按递增顺序显示卡牌

    牌组中的每张卡牌都对应有一个唯一的整数.你可以按你想要的顺序对这套卡片进行排序. 最初,这些卡牌在牌组里是正面朝下的(即,未显示状态). 现在,重复执行以下步骤,直到显示所有卡牌为止: 从牌组顶部抽一 ...

  7. windows 遍历目录下的所有文件 FindFirstFile FindNextFile

    Windows下遍历文件时用到的就是FindFirstFile 和FindNextFile 首先看一下定义: HANDLE FindFirstFile( LPCTSTR lpFileName, // ...

  8. 深入浅出 Java Concurrency (8): 锁机制 part 3[转]

    接上篇,这篇从Lock.lock/unlock开始.特别说明在没有特殊情况下所有程序.API.文档都是基于JDK 6.0的. public void java.util.concurrent.lock ...

  9. Session - 什么叫一次会话

    转载自:https://blog.csdn.net/qin_xiaofang/article/details/77725946 网上收集的:Session代表服务器与浏览器的一次会话过程,这个过程是连 ...

  10. Harbor任意管理员注册漏洞复现

    1. 简介 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源Docker Distribution. ...