<html>

<body>

<style>

.trlangle{

   width: 0;

   height: 0;

   border-left: 50px solid transparent;

   border-right: 50px solid transparent;

   border-bottom: 100px solid red;

}

</style>

<div class="trlangle"></div>

</body>

</html>

2.

<html>

<body>

<style>

.triangle_border_up{

    width:0;

    height:0;

    border-width:0 30px 30px;

    border-style:solid;

    border-color:transparent transparent #333;/*透明 透明  灰*/

    margin:40px auto;

    position:relative;

}

.triangle_border_up span{

    display:block;

    width:0;

    height:0;

    border-width:0 28px 28px;

    border-style:solid;

    border-color:transparent transparent #fc0;/*透明 透明  黄*/

    position:absolute;

    top:0px;

    left:0px;

}

</style>

<div class="triangle_border_up">

    <span></span>

</div>

</body>

</html>

用css做三角形的更多相关文章

  1. 纯css做三角形图标

    以前做三角形图标一直是用图片,或者css3旋转,现在才发现原来还有这么简单的三角形 div { border: 10px solid transparent; border-bottom: 10px ...

  2. css做三角形

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. 纯css做三角形形状

    /* create an arrow that points up */ div.arrow-up { width:0px; height:0px; border-left:5px solid tra ...

  4. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  5. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  6. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  7. 7件你不知道但可以用CSS做的事

    不管你信不信,CSS和JavaScript开始重叠,就像CSS增加了更多功能一新.在我写“你可能不知道的CSS和JavaScript互相影响的5种方式”一文时,人们对于JavaScript和CSS是如 ...

  8. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

  9. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

随机推荐

  1. Ruby中星号打包解包操作

    Ruby中可以使用一个星号*和两个星号**完成一些打包.解包操作,它们称为splat操作符: 一个星号:以数组为依据进行打包解包(参考文章) 两个星号:以hash为依据进行打包解包(参考文章) 两个星 ...

  2. Selenium(十九)：unittest单元测试框架(五) Page Object设计模式

    1. Page Object设计模式 Page Object是Selenium自动化测试项目开发实践的最佳设计模式之一,它主要体现在对界面交互细节的封装,这样可以使测试方案更关注于业务而非界面细节.从 ...

  3. 关于async function(){ let res = await } 详解

    本文引自: https://www.jianshu.com/p/435a8b8cc7d3 async function fn(){ //表示异步,这个函数里面有异步任务 let result = aw ...

  4. ArcGIS api for JavaScript 3.27 在线浏览的一些小部件

    var navOption; var navToolbar;// 当前选择的操作 require( [ "esri/toolbars/navigation", "esri ...

  5. 使用docker简单搭建个人博客

    首先介绍需要的yml文件,docker-compose.yml: version: '3.3' services: db: image: mysql:5.7 volumes: - db_data:/v ...

  6. 树莓派设置frpc开机启动

    1.复制frpc启动命令及配置文件到系统相应目录: $ sudo cp frpc /usr/local/bin/frpc $ sudo mkdir /etc/frpc $ sudo cp frpc.i ...

  7. ramdisk配置、解压、创建rootfs、启动简单分析

    关键词:ramdisk.rdint..init.ramfs.__initramfs_start.__initramfs_size.rootfs.ramfs.populate_rootfs().gzip ...

  8. RPM命令总结

    RPM软件管理程序 rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他 ...

  9. 模拟ssh远程执行命令

    目录 一.服务端 二.客户端 一.服务端 from socket import * import subprocess server = socket(AF_INET, SOCK_STREAM) se ...

  10. electron窗口间通信

    以下代码均来自于我开发的开源软件:想学吗 窗口A的渲染进程发消息给主进程 const { clipboard, ipcRenderer, remote } = require('electron'); ...