用纯Css作三角形
<style>
//向上三角形
.triangle_up{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid red;
}
//向下三角形
.triangle_up{
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-top:30px solid red;
}
//向左三角形
.triangle_up{
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid red;
}
//向右三角形
.triangle_up{
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-left:30px solid red;
}
</style>
<body>
<div class="triangle_up"></div>
<div class="triangle_down"></div>
<div class="triangle_left"></div>
<div class="triangle_right"></div>
</body>
综上所述:你所要的三角形朝向是跟代码所写是对立的。比如:朝上的三角形,你就得用border-bottom;朝左,你就得用border-right;如此。。。
用纯Css作三角形的更多相关文章
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- 【面试题】纯css实现三角形,你知道如何实现吗?
纯css实现三角形 点击打开视频教程 <template> <div id="app"> <!-- 纯css实现三角形书写 --> <di ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 纯CSS绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯css实现三角形
在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现.如下: 向上的三角形 向右的三角形 向下的三角形 向左的三角形 实现它们的css分别是: .top ...
随机推荐
- zTree插件之多选下拉菜单代码
zTree插件之多选下拉菜单代码 css和js <!--ztree树结构--> <link rel="stylesheet" type="text/cs ...
- [tp3.2.1]查询(2)
<?php namespace Home\Controller; use Think\Controller; use Think\Model; class QueryController ext ...
- YTU 2345: 后序遍历二叉树
原文链接:https://www.dreamwings.cn/ytu2345/2611.html 2345: 后序遍历二叉树 时间限制: 1 Sec 内存限制: 128 MB 提交: 3 解决: ...
- JS闭包导致循环给按钮添加事件时总是执行最后一个
加入如下脚本代码: <script> var list_obj = document.getElementsByTagName('li'); for (var i = 0; i <= ...
- Internship-ZOJ2532(网络流求割边)
Internship Time Limit: 5 Seconds Memory Limit: 32768 KB CIA headquarter collects data from acro ...
- OWASP top10
PhishTank 是互联网上免费提供恶意网址黑名单的组织之一,它的黑名单由世界各地的志愿者提供,且更新频繁. 1.XSS 1.1. XSS简介 跨站脚本攻击,英文全称是Cross Site Scri ...
- 自己封装的json工具类
package com.develop.util; import java.util.ArrayList; import java.util.HashMap; import java.util.Ite ...
- filebeat 多行日志的处理
配置文件位于/etc/filebeat/filebeat.yml,就是filebeat的主配置文件 打开文件,搜索multiline:,默认是注释的,常用的有如下三个配置: multiline: pa ...
- android 常见的泄漏内存方法和 leakcanary 使用方法
虽然VM接管了内存分配和回收,但是人类在解决问题的同时也会重新创造出一些新的问题,所以问题永远都解决不了,就产生各种稀奇古怪的就业机会了(跑题跑不停). 无论各种VM用什么算法管理内存, 造成内存泄漏 ...
- [多校联考2 T3] 排列 (DP)
DP Description 对于一个排列,考虑相邻的两个元素,如果后面一个比前面一个大,表示这个位置是上升的,用 I 表示,反之这个位置是下降的,用 D表示.如排列 3,1,2,7,4,6,5 可以 ...