用css样式画三角形(提示框三角形)

转载自https://blog.csdn.net/hope_It/article/details/70217954

  • 经常用于提示框,下拉菜单等(csdn也很多用到,最后一图)
  • 三角形画法

  • html结构 
    <div class="triangle"> 
    </div>
  • 三角形画法 
    • 用border画出,当width、height均为100px时
  •     .triangle {width: 100px;height: 100px;border-left: 10px solid #7d7b7b;border-top: 10px solid #5851c3;border-right: 10px solid #21a4d6;border-bottom: 10px solid #4ed621;box-sizing: border-box;}
  •  
  • –>结果:border 
    改变{width:0; height:0}–>这里写图片描述

    –>再去掉border-top—>这里写图片描述

    –>可以看见上面的一半已经没有了

    –>设置左右两边border-color:transparent; –> 这里写图片描述 
    –>就得到了想要的三角形了,这是向上的,想要哪边就画哪边的border,并且让它相邻两边的border-color:transparent

    –>代码

        .triangle {width: 0;height: 0;border-left: 10px solid transparent;/*border-top: 10px solid #5851c3;*/border-right: 10px solid transparent;border-bottom: 10px solid #4ed621;box-sizing: border-box;}
  •  
  • 画提示框三角形(有边缘的)

    如图:边缘三角形

  • 原理:先画一个三角形,再画白色三角形的,调整几像素位置,覆盖掉一边
  • –> 这里写图片描述

  • 代码
  •  .triangle {position: relative;width: 100px;height: 50px;border: 2px solid #4ed621;border-radius: 5px;}.triangle:before {position: absolute;content: "";top: -10px;left: 25px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #4ed621;}/* 白色覆盖*/.triangle:after {position: absolute;content: "";/*减少两像素*/top: -8px;left: 25px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #fff;}<div class="triangle"></div>
  •  
  • 结果: 
    –> hh–>h

  • 至此,三角形画完,只用到了css2的属性,兼容性一览无余
  • 推荐一款优秀的在线画图工具,很不错(不是广告啊!)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/419221.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

BZOJ1192: [HNOI2006]鬼谷子的钱袋

Description 鬼谷子非常聪明&#xff0c;正因为这样&#xff0c;他非常繁忙&#xff0c;经常有各诸侯车的特派员前来向他咨询时政。有一天&#xff0c;他在咸阳游历的时候&#xff0c;朋友告诉他在咸阳最大的拍卖行&#xff08;聚宝商行&#xff09;将要举行一场拍卖会&#xf…

前端后端接口那些事吐槽

今天与另一位前端开发人员扯起了后端接口的皮&#xff08;我也是前端人员&#xff09;&#xff0c;那个兄弟对后端人员提供的接口很大的意见&#xff08;我是司空见惯&#xff09;&#xff0c;不过他说的也确实有道理&#xff0c;所以结合我的见解&#xff0c;希望提供接口的人…

spring-boot项目打war包并部署到本地的tomcat容器

一、修改打包形式 在pom.xml里设置 <packaging>war</packaging> 二、移除springboot内嵌入式tomcat插件 在pom.xml里找到spring-boot-starter-web依赖节点&#xff0c;在其中添加如下代码&#xff1a; <dependency><groupId>org.springframework…

jquery特效(6)—判断复选框是否选中进行答题提示

前面有一段时间思想开了小差&#xff0c;跟着师父学习了一段时间才发现差距很大&#xff0c;看来我要奋起直追~\(≧▽≦)/~啦啦啦。 最近公司在做一个项目&#xff0c;需要根据用户选择的选项给出相应的提示&#xff0c;下面来看我写的测试程序的效果&#xff1a; 一、实现的原…

前端学习(1701):前端系列javascript之闭包

function create() {const a 100return function() {console.log(a);} } const fn create() const a 200; fn() //100function print(fn) {let a 200;fn(); } let a 100function fn() {console.log(a) } print(fn)//100

iOS8:把这些七招APP哭

6月3日。苹果发布了新一代的高配置手机操作系统iOS 8&#xff0c;我们看到了很多新的功能和引人注目的新变化。它为开发人员提供了许多其他更酷能力发展。第三方输入法也开放&#xff0c;这使得国内的百度、搜狗输入法是不过高兴的尖叫&#xff0c;但IOS8是弄哭了一大拨APP。以…

前端学习(1703):前端系列javascript之问题解答

function fn1(a, b) {console.log(this, this)console.log(a, b)return this is fn1 } const fn2 fn1.bind({ x: 100 }, 10, 20, 30); const res fn2(); console.log(res);//模拟bind Function.prototype.bind1 function() {const args Array.prototype.slice.call(argumen…

11.粘性控件

粘性控件 &#xff08;对View的自定义&#xff09;* 应用场景: 未读提醒的清除* 功能实现:> 1. 画静态图 OK> 2. 把静态的数值变成变量(计算得到真实的变量) OK > 3. 不断地修改变量, 重绘界面, 动起来了.> 4. 功能分析:a. 拖拽超出范围,断开, 松手, 消失b. 拖拽超…

前端学习(1704):前端系列javascript之问题解答2和总结

//闭包隐藏数据 function createCache() {const data {} //闭包中的数据 被访问 不被外界访问return {set: function(key, val) {data[key] val},get: function(key) {return data[key];}} } const c createCache(); c.set(a, 100); console.log(c.get(a)); 弹出1,2,3&…

POST请求传入中文参数,接收端乱码

问题描述&#xff1a;通过post请求调试短信接口发送出去后&#xff0c;客户端无法收到短信&#xff0c;中文内容乱码 追踪过程&#xff1a; 接口采用post请求进行&#xff0c;无法收取短信的接口代码如下&#xff1a; public static String sendPost(String url, Map<Stri…

TCP/IP协议模型

1. 数据链路层 作用(1) 实现网卡接口的网络驱动&#xff0c;以处理数据在以太网线等物理媒介上的传输   (2) 网络驱动程序隐藏了不同物理网络的不同电气特性&#xff0c;为上层协议提供一个统一的接口 应用ARP和RARP(Reverse Address Resolve Protocol)即逆地址解析协议&am…

【转】 Pro Android学习笔记(二九):用户界面和控制(17):include和merge

目录(?)[-] xml控件代码重用includexml控件代码重用merge横屏和竖屏landsacpe portraitxml控件代码重用&#xff1a;include 如果我们定义一个控件&#xff0c;需要在不同的layout中重复使用&#xff0c;或者在同一个layout中重复使用&#xff0c;可以采用include的方式。例如…