分分钟搞定 CSS 中令你困扰的各种三角

话不多说,直接上图

.triangle-one {    display: inline-block;    border-top: 50px red solid;    border-right: 50px green solid;    border-bottom: 50px yellow solid;    border-left: 50px blue solid;}
.triangle-six {    display: inline-block;    border: 50px transparent solid;    border-bottom: 50px yellow solid;}
.triangle-eight {    display: inline-block;    border: 50px transparent solid;    border-left: 30px yellow solid;    border-bottom: 0;}

利用border覆盖属性:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-one {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-two {
            display: inline-block;
            border-top: 0 red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-stree {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-four {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 0 yellow solid;
            border-left: 50px blue solid;
        }

        .triangle-five {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 50px red solid;
        }
        .triangle-six {
            display: inline-block;
            border: 50px transparent solid;
            border-bottom: 50px yellow solid;
        }
        .triangle-seven {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 60px red solid;
            border-right: 0;
        }
        .triangle-eight {
            display: inline-block;
            border: 50px transparent solid;
            border-left: 30px yellow solid;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="triangle-one"></div>
    <div class="triangle-two"></div>
    <div class="triangle-stree"></div>
    <div class="triangle-four"></div>
    <div class="triangle-five"></div>
    <div class="triangle-six"></div>
    <div class="triangle-seven"></div>
    <div class="triangle-eight"></div>
</body>
</html>

  

类似这样的尖角都是这样做:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #ddd;
            position: relative;
        }
        .back-in {
            position: absolute;
            width: 1020px;
            height: 45px;
            left: -20px;
            top: 50px;
            background-color: #2F4F4F;
        }
        .back-img {
            border: 20px solid transparent;
            border-top: 10px solid dimgrey;
            border-right: 0;
            display: inline-block;
            position: absolute;
            top: 95px;
            left: -20px;
        }
        .back-font {
            line-height: 9px;
            margin-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="back-in"><h3 class="back-font">妹子求关注 ^.^</h3></div>
        <div class="back-img"></div>
    </div>
</body>
</html>

                                                                                                                                                                                                                                                                                                                                                                                                                                                          小图片可以去http://www.bootcss.com/p/font-awesome/ 下载第三方模块,

对应的是unicode编码图片

Font Awesome为您提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。

导入方式:

<link href="../font-awesome/css/font-awesome.css" type="text/css" rel="stylesheet">

 

时间: 2024-11-13 10:46:38

分分钟搞定 CSS 中令你困扰的各种三角的相关文章

面试大总结之一:Java搞定面试中的链表题目

链表是面试中常考的,本文参考了其它一些文章,加上小编的自己总结,基本每个算法都测试并优化过. 算法大全(1)单链表 中还有一些链表题目,将来也会整理进来. * REFS: * http://blog.csdn.net/fightforyourdream/article/details/16353519 * http://blog.csdn.net/luckyxiaoqiang/article/details/7393134 轻松搞定面试中的链表题目 * http://www.cnblogs.co

一句话搞定IOS中View的Frame和Bound

就一句话,Frame是父View上看到子View的窗户,Bound是子View上可以被父View看见的内容. 稍微解释下.Frame 指子View在父View中的位置以及大小.由两部分构成,第一部分是Origin,规定了子View在父类的位置.第二部分是Size,指View在父类中的可视范围(这里能说是View的大小).这感觉像是在父View中在Frame.Origin位置打开一个窗户,窗户的大小是Frame.Size,从窗户中可以看到子View的内容. Bound 指子View自身显示那些内容

三步轻松搞定delphi中CXGRID手动添加复表头(多行表头,报表头)

网上有代码动态生成cxgrid多行表头的源码,地址为:http://mycreature.blog.163.com/blog/static/556317200772524226400/ 如果要手动设计多行表头的话,有下面三步搞定: 1.新建一个工程.将CXGRID控件放在上面,Customize创建一个banded table 或者DB BANDED table.操作方法一样. 2.增加BANDS 和columns.加两个BANDS和5个columns.这里看下图红框内的内容为默认这个colum

十分钟搞定CSS选择器

在最近的web开发中是不是就会用到一些选择器,发现很多尤其是CSS3新增的不太熟悉,在此总结一下. 优先级 不同级别 1. 在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式. 2.作为style属性写在元素内的样式 3.id选择器 4.类选择器 5.标签选择器 6.通配符选择器 7.浏览器自定义 同一级别 同一级别中后写的会覆盖先写的样式 基础选择器 选择器 含义 * 通用元素选择器,匹配页面任何元素(这也就决定了我们很少使用) #id id选择器,匹配特定id的元素 .

如何通过热修复,搞定开发中的那些 Bug?

作为程序员,Bug 修复终究是绕不开的话题,本期移动开发精英俱乐部讨论的主题便是 Bug 修复中的 Hotfix,即热修复.接下来让我们跟随大牛的脚步来了解 Hotfix,就算你不能一下豁然开朗,相信也一定会有所启发.非常感谢赖春辉的整理,本文系国内 ITOM 管理平台 OneAPM 审校. 什么是热修复? 主持人-牛树民:我们自己的项目中还没有这方面的技术方案,最近一直在考虑这个.大家对热修复这个名词是怎么理解的?什么是热修复? 七里小晴天:是不是跟游戏打补丁差不多? longway:运行时,

iOS开发分分钟搞定C语言 —— 宏定义和关键字

一.宏定义 概念:宏定义实质是一个预编译指令,在程序未运行之前将某些指令付给相应的变量.一般情况预处理指令都是以#号开头的,所以宏定义也是以#开发,关键字为#define(定义宏定义),#undef(结束宏定义). 定义格式及作用域 一般宏定义都定义在程序的首段: #define 宏名 值. 宏定义的作用域:从开始定义的那行起,一直到文件末尾,虽然默认情况下宏定义的作用域是从定义的那一行开始, 一直到文件末尾.但是我们也可以通过对应的关键字#under提前结束宏定义的作用域. 宏定义规范 一般情

分分钟搞定 JSP 技术

一.JSP的语法    1.模版元素        写在JSP中的html内容        在翻译后的Servlet中, 直接被out.write原样输出 2.JSP脚本表达式        格式: <%=  %>        在翻译后的Servlet中, 计算表达式的值在原样输出 3.JSP脚本片段        格式: <% 若干条java语句 %>        在翻译后的Servlet中, 直接复制粘贴到对应的位置执行 多个片段之间的变量可以互相访问        一个

教你分分钟搞定Docker私有仓库Registry

一.什么是Docker私有仓库Registry 官方的Docker hub是一个用于管理公共镜像的好地方,我们可以在上面找到我们想要的镜像,也可以把我们自己的镜像推送上去.但是,有时候我们的服务器无法访问互联网,或者你不希望将自己的镜像放到公网当中,那么你就需要Docker Registry,它可以用来存储和管理自己的镜像. 二.安装Docker及Registry 安装Docker见之前博文: http://www.cnblogs.com/Javame/p/5492543.html 安装Regi

分分钟搞定LaunchMode

Android有四种Activity的LaunchMode分别为standard.singleTop.singleInstance.singleTask,大概的应用场景如下: 1.standard,默认的启动模式 2.singleTop,适用于从通知栏进入的界面,比如推送,使用singleTop启动的界面当当前activity位于栈顶的时候系统就不会调用onCreate方法新建activity,而是走栈顶activity的onNewIntent方法,自己也可以startActivity的时候从本