用css画三角形

当我们给某个图片做一个弹出层的时候,如果要让我们的弹出层显示一个小箭头,可以用css来画

用div来演示

div{
  border:12px solid;
  berder-color:transparent green transparent transparent;
  height:0;
  width:0;
}

这样就可以显示一个小三角形

时间： 2024-08-05 11:16:06

用css画三角形的相关文章

使用CSS画三角形

很多时候我们会遇到需要应用三角形元素的场景,比如一个下拉菜单的交互提示: 或者一个页旁的装饰性标签: 实际上,给页面添加三角形的解决方案有很多,用CSS.SVG.Canvas,甚至用PS画一个贴上去都可以,但是我们在考虑解决方案时一定要选择最优的那个.可以肯定的是,当对三角形的功能需求比较简单和单一的时候,图片是首先被排除的方案.图片的难以维护性为页面的调试和修改都带来了一定的困难,所以当一个问题可以用代码来解决的时候我们一定要首先考虑它.再来考虑Canvas,尽管Canvas相对容易修改,但它

CSS画三角形的原理

今天遇到一个无序列表,每一行的开始都要用一个小三角形,像这样,如果在以前,我肯定直接放图片进去了,然而学习了CSS后,我认为CSS一定能完成这个小图形. 关键需要把元素的宽度.高度设为0. 原理如下: 首先,写一个with和height都是40px的div,border宽度也是40px,看看是什么效果? HTML代码: <div class="triangle"></div> css代码: .triangle { width: 40px; hei

CSS画三角形集锦

triangle_up 向上三角形代码: <style type="text/css"> .tri-up { border-color: #FFF #FFF #EED2EE #FFF; border-style: solid; border-width: 0 60px 100px 60px; height: 0; width: 0; } .tri-up-transparent { width: 0; height: 0; border-left: 60px solid tr

2016/2/24 css画三角形 border的上右下左的调整以及内区域的无限变小背景透明

网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. 今天给大家带来 CSS 三角形绘制方法代码如下: 1 #triangle-up { 2 width: 0; 3 height: 0; 4 border-left: 50px solid transparent; 5 border-right: 50px solid transparent; 6 bord

css画三角形

效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三角形</title> <style> #tri{ width: 0; height: 0; border-top: 0 solid transparent; border-left: 10px solid transparen

div+css 画三角形

CSS 画三角形

.crossSquare { height: 0px; width: 0px; border-bottom: 50px solid #006633; border-left: 50px solid transparent; border-right: 50px solid transparent; } <div class="crossSquare"></div>

如何用css画三角形

1.#triangle02{ width: 0; height: 0; border-top: 50px solid blue; border-right: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid yellow; } 2. #triangle03{ width: 0; height: 0; border: 50px solid transparent; border-top: 50px so

微信小程序css画三角形内有文字

<view class="productStatus"> <span> <em>已上架</em> </span> </view> .productStatus { position: absolute; right: 0; top: 0; height: 1.81rem; width: 1.81rem; display: flex; align-items: center; } .productStatus spa