结合实际情况自己写的:

.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. Android四大组件之——Activity的开启:StartActivity()和StartActivityForResult()(图文详解)

                如需转载请在文章开头处注明本博客网址:http://www.cnblogs.com/JohnTsai       联系方式:JohnTsai.Work@gmail.com   ...

  2. ubuntu-16.04.2-desktop-amd64.iso:安装Oracle11gR2

    特点: 使用ubuntu-16.04.2-desktop-amd64.iso 不降级默认的gcc版本,(liveCD 自带默认为 gcc 5.4):仅需要建立“gcc -Wl,--no-as-need ...

  3. linux环境中安装ftp服务

    需求说明: 今天项目中有一个新的需求,需要在linux环境中搭建一个ftp服务,在此记录下. 操作过程: 1.通过yum的方式安装ftp服务对应的软件包 [root@testvm01 ~]# yum ...

  4. linux环境中,查看域名的DNS信息?

    需求说明: 今天在linux主机上,要查询一个域名是在哪个DNS上进行解析的,这个域名下面还有哪些的地址 操作过程: 1.linux环境中通过nslookup命令来进行查看 [deployer@CBS ...

  5. %s %d %f 等等是什么意思

    这个是C语言的格式化输出:%s是字符串.%d是整数.%f代表浮点数. 这些是格式声明,格式声明由“%”和格式字符组成.常用的格式字符有:1)d格式符,用来输出一个有符号的十进制整数:2)c格式符,用来 ...

  6. mysql临时表产生的执行效率问题改进(转)

    问题: 近日,线上MySQL查出一个慢sql,每次都要查询1000ms以上,严重影响用户体验 今得空去诊断一番,记录如下: sql原句: SELECT r.object_id AS cardId, c ...

  7. Ansible 安装和管理服务

    ansible 使用 yum 模块来安装软件包,使用 service 模块来启动软件: [root@localhost ~]$ ansible 192.168.119.134 -m yum -a &q ...

  8. Memcached 数据导出与导入

    我们使用 memcached-tool 命令来导出数据: [root@localhost ~]# memcached-tool dump > /tmp/.txt Dumping memcache ...

  9. CentOS7--TigerVNC

    --安装服务yum install tigervnc-server -y --配置文件,多个用户就拷贝多个cp /lib/systemd/system/vncserver@.service /etc/ ...

  10. [置顶] 深入探析Java线程锁机制

    今天在iteye上提了一个关于++操作和线程安全的问题,一位朋友的回答一言点醒梦中人,至此我对Java线程锁有了更加深刻的认识.在这里也做个总结供大家参考. 先看几段代码吧! 代码一: public  ...