css绘制三角形

李金龙
李金龙
管理员
496
文章
0
粉丝
CSS3评论6,7521字数 419阅读模式

正三角

上方边框隐藏，左右两侧的边框透明色

css绘制三角形-图片1

  1. .just_triangle {
  2.     width: 0;
  3.     height: 0;
  4.     background: transparent;
  5.     border: 50px solid;
  6.     border-top: transparent;
  7.     border-left-color: transparent;
  8.     border-right-color: transparent;
  9.     border-bottom-color: #c40000;
  10. }

倒三角

下方边框隐藏，左右两侧的边框透明色

css绘制三角形-图片2

  1. .down_triangle {
  2.     width: 0;
  3.     height: 0;
  4.     background: transparent;
  5.     border: 50px solid;
  6.     border-bottom: transparent;
  7.     border-left-color: transparent;
  8.     border-right-color: transparent;
  9.     border-top-color: #c40000;
  10. }

左三角

右侧边框隐藏，左右两侧的边框透明色

css绘制三角形-图片3

  1. .left_triangle {
  2.     width: 0;
  3.     height: 0;
  4.     background: transparent;
  5.     border: 50px solid;
  6.     border-right: transparent;
  7.     border-top-color: transparent;
  8.     border-bottom-color: transparent;
  9.     border-left-color: #c40000;
  10. }

右三角

左侧边框隐藏，左右两侧的边框透明色

css绘制三角形-图片4

  1. .right_triangle {  
  2.     width: 0;  
  3.     height: 0;  
  4.     background: transparent;  
  5.     border: 50px solid;  
  6.     border-left: transparent;  
  7.     border-top-color: transparent;  
  8.     border-bottom-color: transparent;  
  9.     border-right-color: #c40000;  
  10. }  

 

左右对立三角

border默认颜色为黑色，所以当上下颜色透明后，右侧的三角形呈现黑色

css绘制三角形-图片5

  1. .lr_triangle {  
  2.     width: 0px;  
  3.     height: 0px;  
  4.     background: transparent;  
  5.     border: 50px solid;  
  6.     border-bottom-color: transparent;  
  7.     border-left-color: #c40000;  
  8.     border-top-color: transparent;  
  9. }  

上下对立三角

border默认颜色为黑色，所以当左右颜色透明后，下侧的三角形呈现黑色

css绘制三角形-图片6

  1. .tb_triangle {  
  2.     width: 0px;  
  3.     height: 0px;  
  4.     background: transparent;  
  5.     border: 50px solid;  
  6.     border-left-color: transparent;  
  7.     border-top-color: #c40000;  
  8.     border-right-color: transparent;  
  9. }  

历年同日文章
11 月
21
 
李金龙
  • 本文由 李金龙 发表于2017年11月21日 09:08:16
  • 转载请务必保留本文链接：https://www.lijinlong.cc/daqianduan/css3/2169.html

加载中...

生活随记

css动画让精灵球动起来

在使用了css绘制三角形，css绘制圆形后，搞了个今天这么高端的玩意，原本是准备创建婕洛的标识，但是发现线条控制不好。 所以选择精灵球来作为绘制的对象，如下 是不是瞬间有了童年的感觉。 代码实现 需用...
7,866评论css图形 css绘图
CSS3

css绘制圆形

基于昨天的CSS绘制三角形，今天搞了个圆形的绘制，在半圆的时候简单的涉及了变换这个属性。 圆形 普通的圆形只需要一个简单的标签（border-radius）即可完成，可使用数字或者百分比来控制，通常只...
6,779评论css图形
CSS3

css绘制圆形

基于昨天的CSS绘制三角形，今天搞了个圆形的绘制，在半圆的时候简单的涉及了变换这个属性。 圆形 普通的圆形只需要一个简单的标签（border-radius）即可完成，可使用数字或者百分比来控制，通常只...
6,779评论css图形
匿名

发表评论

匿名网友
确定

拖动滑块以完成验证