结合实际情况自己写的:

.menu_triangle {
height: 10px;
width: 10px;
background-color: #049888;
transform: translate(75px, -5px) rotate(-45deg);
}
    • 摘要:网上有很多html+css制作带三角的矩形的方法,我在这里列举其中一种,兼容bootstrap3。我们先来看一个三角在左边的对话框的效果图矩形就不必说了,矩形的border-radius也不用说了,圆角可以自己设置,可以直接用bootstrap中的类。下面说下矩形左边的小三角,我们可以这么设置。右边的矩形我们标记为类log-content,左边的小三角我定义为类triangle,在html中的代码是这样:<divclass="log-content"
    • 网上有很多html+css制作带三角的矩形的方法,我在这里列举其中一种,兼容bootstrap3。

      我们先来看一个三角在左边的对话框的效果图 

      矩形就不必说了,矩形的border-radius也不用说了,圆角可以自己设置,可以直接用bootstrap中的类。下面说下矩形左边的小三角,我们可以这么设置。右边的矩形我们标记为类log-content,左边的小三角我定义为类triangle,在html中的代码是这样:

      <div class="log-content"> 增加一些特点啊神马的 如果想把 number的设置有两种方式 第一种是在数据库里设置然后显示 另外一种就是 </div><div class="triangle"></div>

      接下来看下css如何实现他们的无缝结合

      .triangle{ position:absolute; bottom:-6px; left:30px; overflow:hidden; width:13px; height:13px; background:#43B1F1; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); left: -6px; top: 15px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')"; filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand');}.log-content { position:relative; background:#43B1F1; border-radius:12px; text-align:left; color:white; padding: 20px;}

      这是利用css3的transform实现的。

      如果我想做一个三角在上面的对话框又该如何呢?

      这时候,仅需调整.triangle的css设置就好了

      .triangle{ position:absolute; overflow:hidden; width:13px; height:13px; background: white; display: none; -webkit-transform:rotate(135deg); -moz-transform:rotate(135deg); -o-transform:rotate(135deg); transform:rotate(135deg); left: 47%; top: 48px; -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865475, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865475, SizingMethod='auto expand')"; filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865475,M12=-0.7071067811865477,M21=0.7071067811865477,M22=0.7071067811865475,SizingMethod='auto expand');}

      通过改变left top bottom 的值,你会将小三角放到自己想要放的位置了。

    • 以上是

html+css制作带三角的矩形

      的内容,更多

三角矩形制作HTMLcss

      的内容,请您使用右上方搜索功能获取相关信息。

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

方法二:

前些天在牛课网上看到了一个百度的面试题,题目如下:

请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:
<div id=”demo”></div>

刚看到这个题目觉得无从下手,感觉一般这种不都是一个背景图片吗,怎么还能用css写的?? 后来看到网友的答案,试着运行了一下发现真的和图上的一模一样,最伤心的是看到答案竟然还看不懂。。觉得自己还是好水,仔细琢磨了一下,现将心得整理一下:

实现图示的效果涉及到的知识主要有两点:一个是before、after伪元素,一个是border

1、before 和 after 都是css中的伪元素,他们俩用法都差不多,通过给定一个属性content给元素添加新的内容,不同的是before用来在元素前插入新内容,after用来在元素后面插入新内容。

比如有一个p元素:水

<p>水</p>
如果给这个p元素设置一个before:
p:before{
content:"上海自来";
}
这个p就变成了:上海自来水,content属性的值就添加到了p元素内容的前面。
相反的,如果是用after:

p:after{
content:"来自海上";
}
这个p就会变成:水来自海上。
简单的before、after使用就是这样,一开始看的时候觉得好简单,不就是插入个内容吗,但实际上插内容不算什么,最重要的是它能设!置!样!式!一旦给它设置各种各样的样式之后这个伪元素就厉害了,比如题目中的尖角,题目只给了一个div我们,但是很明显div只能弄出一个左边的带边框正方形,右边的尖角怎么来的呢,那就可以靠这个伪元素了。

思路很简单,先把正方形画出来,然后通过before或者after变出一个尖角出来,放到正方形右上角去。div如下:

#demo{
width:100px;
height:100px;
background-color:#fff;
border: 2px #000 solid;
}
好,这个时候正方形已经出来了,但是三角形怎么画出来呢,这就要用到border了

2、以前使用border都是border:1px #000 solid,顶多换换颜色和边框值,没想到画三角形也能靠它……

以前没发现的原因在于使用border的时候总是1px、2px的,太细了,当把边框变成20px的时候就有意思了,下面是一个边长10px的正方形设置其边框长也为10px:

我们知道可以通过设置border-left等等手动设置四个边框为不同颜色,分别设置之后:

马上看出靠谱,如果把这个div的宽度减小到0之后岂不就是四个三角形了,动手实验:

果然是,那把上下右的颜色变透明之后就能得到一个三角形拉,在这里要注意的是把其他三个边透明是能得到一个三角形的,但是如果只设置左边框而不设置其他三个边框是得不到的,自己动手试下便知,因为如果只设置左边框,而这个div的高度又为0,那这个左边框是不会向上下两端扩展的,只有当上或下也有边框时才会呈现出一个三角形,所以我们可以把所有边框透明掉,然后把左边框显示即可。比如下面这样:

diiv{
width:0px;
height:0px;
border: 20px transparent solid;
border-left-color: #000;
}
      就能得到这个效果了:

那把三角形放到正方形右侧就很简单了,有一点是那个正方形是缺了一段的,我们可以让三角形颜色为白色覆盖掉正方形的边框,另外再用一个黑色的比白色三角形大一点的三角形放在白三角形下面,这样就只漏出了三角形的两条边,所以这里同时用到了before和after。

因为before和after插入的三角形是放在指定的位置的,所以它们的position都设置为绝对定位,那么div就要设置成相对定位了:

#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}

首先是黑色的三角形:

#demo:before{
width:0px;
height:0px;
border: 10px transparent solid;
border-left-color: #000;
position:absolute;
top:20px;
left:100%;
content:""
}

注意content虽然没有值,但是必须得加上。现在效果如下:

然后是比黑色三角形小一点点的白色三角形:

#demo:after{
width:0px;
height:0px;
border: 8px transparent solid;
border-left-color: #fff;
position:absolute;
top:22px;
left:100%;
content:""
}
注意白色三角形比褐色三角形要小,所以边框长度就小2px,且top也大2px,效果如下:

由此这个题目就做完拉,当然相同的样式可以整理下,最终样式如下:

#demo{
width:100px;
height:100px;
border: 2px #000 solid;
background-color:#fff;
position:relative;
}
#demo:before, #demo:after{
width:0px;
height:0px;
border:transparent solid;
position:absolute;
left:100%;
content:""
}
#demo:before{
border-width:10px;
border-left-color: #000;
top:20px;
}
#demo:after{
border-width:8px;
border-left-color: #fff;
top:22px;
}

html如何绘制带尖角(三角)的矩形的更多相关文章

  1. 百度前端笔试题目--css 实现一个带尖角的正方形

    今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯 ...

  2. 来自网易云的黑科技,带尖角的div......

    今天在网易云的网页版听歌,话说Steve Vai的曲子永远是这么让人揣摩不透,不过我还时更喜欢老Joe,咦,跑题了··· 大家可以看到评论输入框和回复框,上面都有个小尖角,实现的方式有很多,我一般是用 ...

  3. (转载) css实现小三角(尖角)

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

  4. 纯CSS实现带小角的对话框式下拉菜单

    最近公司首页样式重写,头部下拉菜单改为了带小角的对话框式下拉菜单: 很多人可能会用图片,事实上纯CSS就能够实现: HTML: <!DOCTYPE html> <html lang= ...

  5. CSS3之尖角标签

    如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> ...

  6. WPF 气泡尖角在左边、下面、右边、上面

    由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" Strok ...

  7. 去除html页面中按钮在ios中的默认样式,去除select自带的小三角图标

    btn{-webkit-appearance: none;} -webkit-appearance: none也能去掉select下拉列表后面自带的小三角

  8. 用CSS实现文本框尖角

    经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...

  9. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

随机推荐

  1. 如何在IntelliJ IDEA中快速配置Tomcat

    近来使用idea编写java代码的人越来越多,最关键的就是idea强大的代码提示功能,能极高的提升程序员的开发效率,但是毕竟各有所长,idea中tomcat的配置就没有eclipse那么轻松,这里简单 ...

  2. Java学习之——JavaBeans

    1.什么是JavaBeans? JavaBeans是Java语言中可以重复使用的软件组件,它们是一种特殊的Java类,将很多的对象封装到了一个对象(bean)中.特点是 可序列化, 提供无参构造器, ...

  3. node配置自动监测文件改变不重启

    方法一: nodemon npm install -g nodemon nodemon ./bin/www 或者在npm start命令里把node改为nodemon 方法二:supervisor n ...

  4. Spring MVC手札

    本文用于记录使用Spring MVC中的零散手札 1.在普通java类中获取HttpServletRequest对象  在web.xml的listener节点加入 <listener> & ...

  5. Missing iOS Distribution signing identity

    打包上传appstore的时候报错如下: 解决方法: Download https://developer.apple.com/certificationauthority/AppleWWDRCA.c ...

  6. Dubbo -- 系统学习 笔记 -- 示例 -- 分组聚合

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 分组聚合 按组合并返回结果,比如菜单服务,接口一样,但有多种实现,用group区分 ...

  7. itchat+pillow实现微信好友头像爬取和拼接

    源码下载链接:https://pan.baidu.com/s/1cPZhwy 密码:2t2o ###效果图 使用方法: 下载项目到本地,打开项目主目录,打开命令行,输入: pip install -r ...

  8. scala中隐式转换之隐式转换调用类中本不存在的方法

    /** * Created by root * Description : 隐式转换调用类中本不存在的方法 */ class Person(name : String){ def getPersonN ...

  9. ch3:文件处理与异常

    如何从文件读入数据? python中的基本输入机制是基于行的: python中标准的“打开-处理-关闭”代码: the_file=open('文件全称') #处理文件中的数据 the_file.clo ...

  10. HTML 格式化

    格式化标签: <!DOCTYPE HTML> <html> <body> <b> This text is bold </b> # < ...