CSS3：不可思议的border属性

weknow619 发布于2019-08-28 18:05 / 624人阅读

摘要：原文译文不可思议的属性译者在中，其属性有很多的规则。对于一些事物，例如三角形或者其它的图像，我们仍然使用图片代替。但是现在就不需要了，我们可以用形成一些基本图形，我分享了一些关于这方面的技巧。

原文：Magic of CSS border property

译文：不可思议的CSS border属性

译者：dwqs

在CSS中，其border属性有很多的规则。对于一些事物，例如三角形或者其它的图像，我们仍然使用图片代替。但是现在就不需要了，我们可以用CSS形成一些基本图形，我分享了一些关于这方面的技巧。

1、正三角形：

.triangle_up
{
  height:0px; width:0px;
  border-bottom:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

2、倒三角形：

.triangle_down
{
  height:0px; width:0px;
  border-top:50px solid #006633;
  border-left:50px solid transparent;
  border-right:50px solid transparent;
}

3、左三角形

.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  float:left;
}

4、右三角形

.triangle_right
{
  height:0px; width:0px; float:left;
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}

5、十字街效果

.crossSquare
{
  height:0px; width:0px;
  border-right:50px solid blue;
  border-top:50px solid gray;
  border-bottom:50px solid red;
  border-left:50px solid yellow;
}

1至5的demo演示（为了演示方便，对源代码改动了一下）：http://jsfiddle.net/rt8cjtwq/embedded/result/

6、方向箭头（突出效果，改动了源代码）

CSS：

.triangle_left
{
  height:0px; width:0px;
  border-left:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
  /*float:left;*/
}

.triangle_right
{
  height:0px; width:0px; /*float:left;*/
  border-right:50px solid #006633;
  border-top:50px solid transparent;
  border-bottom:50px solid transparent;
}

HTML：

效果：

7、制作一个Delicious Logo：

CSS：

.delociousLogo
 {
   height:100px; width:100px;
 }

 .topleft
 {
   height:0px; width:0px;
   border-top:50px solid #FFFFFF;
   border-right:0px solid #FFFFFF;
   border-bottom:0px solid #FFFFFF;
   border-left:50px solid #FFFFFF;
   float:left;
 }

 .topright
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #0000CC;
   border-right:0px solid #0000CC;
   border-bottom:0px solid #0000CC;
   border-left:50px solid #0000CC;
 }

 .bottomleft
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #000000;
   border-right:0px solid #000000;
   border-bottom:0px solid #000000;
   border-left:50px solid #000000;
 }

 .bottomright
 {
   float:left;
   height:0px; width:0px;
   border-top:50px solid #999999;
   border-right:0px solid #999999;
   border-bottom:0px solid #999999;
   border-left:50px solid #999999;
 }

HTML：

效果：（左上角的边框颜色是白色）

原文首发：http://www.ido321.com/1200.html

云服务器 GPU云服务器 border属性不可转入的域名不可使用的邮箱域名两位数的域名不可注册

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111001.html

CSS3主要内容

摘要：必须要准确的放置否则声明无效。倒影设置元素的倒影准确的来说不能算是的东西，但需要知道。默认值不可继承背景渐变渐变是在中新增加的图片类型使用渐变可以在两种颜色间制造出平滑的渐变效果用它代替图片，可以加快页面的载入时间减小带宽占用。 CSS3主要内容一、CSS选择器 CSS3选择器规范地址： https://www.w3.org/TR/2011/RE... ...

X_AirDu 2019-08-30 11:15 评论0 收藏0
CSS3实战之一些常用Tips

摘要：本文为部分翻译文章，主要内容来自于，笔者自身也添加了一些自己的小的。设置自动居中任何一个元素的自动居中可以使用属性使用逗号分割列表使用负的属性选择元素使用作为使用作为图标可以达到自动缩放的效果。本文为部分翻译文章，主要内容来自于：css-protips，笔者自身也添加了一些自己的小的Tips。使用:not()属性为导航添加或者去除边框传统的方法是首先为每个li标签添加标签： /*...

joywek 2019-08-28 18:19 评论0 收藏0
重温HTML和CSS3

摘要：不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。何为一种脚本语言，是一种动态类型弱类型基于原型的语言，内置支持类型。二代码规范在之前很多开发人员对的代码规范知之甚少，在年至年，许多开发人员从转换到。重温Web前端基础本篇幅中着重文字，只是记录一些自己的见解，巩固下自身基础网页结构是什么？结构层 html 导航，列表，段文字，图片，链接，表示层 ...

Taonce 2019-08-29 16:21 评论0 收藏0
重温HTML和CSS3

摘要：不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。何为一种脚本语言，是一种动态类型弱类型基于原型的语言，内置支持类型。二代码规范在之前很多开发人员对的代码规范知之甚少，在年至年，许多开发人员从转换到。重温Web前端基础本篇幅中着重文字，只是记录一些自己的见解，巩固下自身基础网页结构是什么？结构层 html 导航，列表，段文字，图片，链接，表示层 ...

objc94 2019-08-02 11:11 评论0 收藏0
图解CSS3读书笔记文本与颜色

摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。 CSS3文本 css字体类型属性 font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font...

lvzishen 2019-08-28 18:26 评论0 收藏0