CSS3积累(4) 画三角形和对话框

要求

  1. 单纯用css3实现画任意三角形
  • 其实很简单,div块里,将width和height设为0;将border的四边分别设置不同的颜色,如效果图。
    看到此你是否有一个大胆的想法~
  • 将想保留的三角形保持最开始的设置,而其他三个三角形都让其背景色为transparent即可;
  • 同时为了保证三角形不占多余的位置,故保留的三角形的对顶角对应的border宽度需设置为0,效果如图。
  1. 绘制对话框
  • 会画三角形了,那么就可以结合伪元素来绘制对话框了

代码

  
      
        CSS学习之路  
        
        
          
         
        
     
     
        
Hello world!
I'm Shaoyu!

效果

image.png

思考

如何画一个钝角三角形,不规则或者直角三角形呢?
Tips:同样是通过border的宽度来控制

你可能感兴趣的:(CSS3积累(4) 画三角形和对话框)