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

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

其中，

<!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. myeclipse启动jboss报ERROR [MainDeployer] Could not create deployment

    今天用myeclipse启动jboss时报了这样的错,花了我将近一天的时间去解决这个问题,开始以为jar包问题,到最后发现是配置错了,所以分享一下.具体报错信息如下图: ERROR [MainDepl ...

  2. python 中的 is 方法 总结

    isidentifier: 判断变量名是否合法 iskeyword:是否为内置关键字

  3. ftp文件上传下载命令

    介绍:从本地以用户wasqry登录的机器1*.1**.21.67上通过ftp远程登录到ftp服务器上,登录用户名是lte****,以下为使用该连接做的实验.  查看远程ftp服务器上用户lte**** ...

  4. vue 实现邮戳边缘

    效果: vue: <template> <div class="couponItem"> <div class="itemLeft" ...

  5. 【论文翻译】NIN层论文中英对照翻译--（Network In Network）

    [论文翻译]NIN层论文中英对照翻译--(Network In Network) [开始时间]2018.09.27 [完成时间]2018.10.03 [论文翻译]NIN层论文中英对照翻译--(Netw ...

  6. C语言中常用的字符串处理函数总结

    C语言中字符串处理函数备注 此文仅用于自己研究和记录 字符串处理函数 1. char *gets(char *s); #include<stdio.h> 功能: 从标准输入读入字符,并保存 ...

  7. Python-异常处理 使用selenium库自动爬取数据

    异常处理 处理程序的报错 语法 捕捉万能异常: try: print(a) except Exception as e: print("你的代码有问题") print(" ...

  8. PAT甲级——A1021 Deepest Root

    A graph which is connected and acyclic can be considered a tree. The height of the tree depends on t ...

  9. Cocos2dx 3.0 过渡篇（二十八）C++11强类型枚举

    一朋友在微信朋友圈晒了张照片,随手点开大图,带着赞赏的眼光扫了下,恩,几个月不见.又美丽了...咦?等等,她戴的这是什么?酷炫的造型! 金属边框! 微型摄像头! 这不是传说中的谷歌眼镜么?土豪啊,还好 ...

  10. python-web-下载所有xkcd漫画

    下载所有xkcd漫画 # downloads every single xkcd comic import requests,os,bs4 url='http://xkcd.com' # start ...