CSS中的一下小技巧1之CSS3三角形运用

番茄西红柿发布于2019-04-23 11:48 / 3142人阅读

摘要：后来知道原来可以用实现三角形，可是用过一次后很容易忘记，所以想把这个小技巧记录起来是如何实现三角形的呢答案是通过边框，也就是属性。

使用CSS3实现三角形：

　　在前端页面中有很多时候会遇到需要三角形图案的时候，以前不知道可以用CSS3实现三角形的时候，一般都是叫UI把三角形图案切出来。

　　后来知道原来可以用CSS3实现三角形，可是用过一次后很容易忘记，所以想把这个小技巧记录起来~

　　CSS3是如何实现三角形的呢？——答案是通过边框，也就是border属性。

　　边框

<style>
    .triangle{
        width: 100px;
        height: 100px;
        border: 30px solid palegreen;
        margin: 0 50px;
    }
style>
<div class="triangle">div>

　　这个时候是这个样子的：

　　接下来宽高设置为0，四边都给上不同的颜色~

<style>
    .triangle{
        width: 0;
        height: 0;
        margin: 0 50px;
        border-top: 30px solid palegreen;
        border-right: 30px solid deepskyblue;
        border-bottom: 30px solid palevioletred;
        border-left: 30px solid peru;
    }
style>
<div class="triangle">div>

　　变成了这样~是不是有四个小三角形啊~

　　既然出来了四个小三角形，那我们可以把不想要的三角形的颜色设置透明即可：

.triangle-left,.triangle-right,.triangle-bottom,.triangle-top{
        width: 0;
        height: 0;
        margin: 0 50px;
        border: 30px solid transparent;
    }
    .triangle-left{
        border-left: 30px solid peru;
    }
    .triangle-right{
        border-right: 30px solid palevioletred;
    }
    .triangle-bottom{
        border-bottom: 30px solid deeppink;
    }
    .triangle-top{
        border-top: 30px solid palegreen;
    }
style>
<div class="triangle-left">div>
<div class="triangle-top">div>
<div class="triangle-right">div>
<div class="triangle-bottom">div>

　　这样我们就得到了所有方向的三角形啦~

　　在项目中可以将这些随意搭配，随意发挥啦~

云服务器 GPU云服务器 css3 css3气泡 css3动画 JS+CSS3

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

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

CSS中的一下小技巧2之CSS3动画勾选运用

使用CSS3实现动画勾选　　相信大家在项目中会经常遇到这种需求：勾选框。现在用CSS3来实现一个动画勾选，只需要一个标签即可完成：　　这次需要用到CSS中伪类 after，这个小技巧也是很容易忘记的，所以决定记录起来~ 　　首先给标签加宽高加背景色： .check{ width: 40px; height: 40px; backgr...

gaara 2019-04-23 11:48 评论0 收藏0
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS

摘要：层叠即表示允许以多种方式来描述样式，一个元素可以被渲染呈现出多种样式。可以让属性的变化过程持续一段时间，而不是立即生效。比如，将元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用后，将按一个曲线速率变化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全称是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 评论0 收藏0
CSS开发

摘要：译十六进制颜色揭秘原文地址原文作者译文出自掘金翻译计划本文永久链接教程入门篇关于是一款进行栅格布局的辅助工具，它让开发者摆脱了冗杂的数学计算，同时降低了样式与结构的耦合程度。【译】CSS 十六进制颜色揭秘原文地址：CSS Hex Colors Demystified 原文作者：Dave Gash 译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/...

warkiz 2019-08-30 13:54 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0