• 纯CCS画三角形箭头

    纯CCS画三角形箭头

    最近我想修改一下这个网站,我想在上面放置一个提示框。这是很容易,但我想让提示框上有一个三角形的箭头。可是,一想到这需要使用图片,并且各种颜色,各种方向的箭头要准备无数种,这几乎是一种灾难。幸运的是,MooTools的核心开发着Darren Waddell告诉了我一个非常棒的技术:用CSS绘制三角形箭头。使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头!CSS代码/* create an&nbs...

    CSS学习 1年前 742 0 三角形
  • 纯CSS写三角形,自适应不同宽度

    纯CSS写三角形,自适应不同宽度

    今天在写一个定制模板的时候,遇到一个全屏三角形做的特效,需要用到自适应,在不同分辨率下都三角形都能自适应居中!看图:因为这个zblog模板需要自定义配色,所以这个三角形必须使用css制作,不能使用背景图片,当浏览器缩小的时候,三角形居中不变!HTML:<div class="triangle"><div class="box"></div>&...

    CSS学习 5年前 3086 1 三角形
  • CSS 三角形对话框(带边框)-  :before + :after + border

    CSS 三角形对话框(带边框)- :before + :after + border

     关于三角形的各种画法,之前在文章《纯CSS - border绘制三角形(各种角度)》内有详细的介绍,今天来讲的是CSS绘出对话框和三角带边框!真正的三角形画法虽然重要,但常用程度甚至不如本文介绍的带边框三角形,因为现在网页需要弹出各种信息,比如二维码,比如联系方式等,都需要用到对话框,这个框如果使用PS做图的话也可行,但很浪费时间,css直接实现的话更靠谱!如上图所示,代码如下:<!DOCTYPE html&...

  • 纯CSS - border绘制三角形(各种角度)

    纯CSS - border绘制三角形(各种角度)

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

1