CSS组件_0 燕尾_一只前端小马甲的博客

三、小马甲实现

我们不妨假设长方形高h为 40px ，那么正方形边长约为 28px 。
<style>
    .c-step {
        position: relative;
        display: inline;
        height: 40px;			/** height 即为长方形的高h **/
        width: 80px;
        padding: 0 20px 0 45px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #ef8825;
        color: white;
        user-select: none;
    .c-step::before {			/** 首端正方形 **/
        position: absolute;
        left: -14px;			/** 平移距离为x/2 **/
        width: 28px;			/** 正方形边长 **/
        height: 28px;			/** 正方形边长 **/
        transform: rotate(-45deg);	/** 旋转45° **/
        content: "";
        background: white;
    .c-step::after {			/** 末端正方形 **/
        position: absolute;
        right: -14px;			/** 平移距离为x/2 **/
        width: 28px;			/** 正方形边长 **/
        height: 28px;			/** 正方形边长 **/
        transform: rotate(-45deg);	/** 旋转45° **/
        content: "";
        background: #ef8825;
</style>
    <div class="c-step">燕尾</div>
</body>
本文介绍了CSS组件——燕尾的一种实现方式：通过在长方形盒子两端加正方形，利用平移、旋转的手段形成燕尾形状。平移是通过设置元素为absolute，利用left、right属性设置相对于父元素的相对位置实现；选装是通过设置元素的transform属性实现。 
基础知识关键字：绝对布局、旋转、CSS
                                    　　用户:after元素实现小旗的燕尾效果。如下图所示：
[align=center]
[img]http://dl2.iteye.com/upload/attachment/0123/9281/42602402-942c-3b45-81cb-67da778e7d51.png[/img]
[/align]
　　代码很简单，就是把:after元素旋转一下：
[code="html"]
...
                                    本文探讨的是圆角框的终极解决方案，其核心关键词是“圆滑、完美、兼容、重用性、语义”，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。第五种：利用私有属性绘制圆角(FF3 only)收录理由：平滑无锯齿图五特点：不用任何图形。兼容性：只能在FF3中使用，其它浏览器不受支持。圆角半径随意调整重用性强：多个圆角任意调用，只需要样式表设置就可以。圆角颜色随意设置...
                                    在开发页面的时候，遇到很多的列表都需要用到箭头，可以直接用图片作背景铺垫，纯CSS也能实现，并且没有兼容性顾虑，不用CSS3,相比而言，比图片更好用。原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了梯形代码： 
html:
<div class="arrow"></div>css:
arrow{
width:10px;
                                    有时候网页中使用箭头以增强效果，一般的做法是使用图片，但是使用CSS样式也一样可以来实现“箭头效果”。而且效果非常绚丽。具体的颜色代码可以根据自己的需要去替换！代码如下：table{width:50%; font-size:14px; font-family:Arial; color:#333}.arrow-top,.arrow-right,.arrow-bottom,.arrow-left{fo...
2、设计思想：
  在设计鸟类相册时，分为html，css，JavaScript三个部分。首先是HTML部分：有鸟类相册标题，鸟的图片，鸟的基本介绍，还有不同的鸟的目录。然后是css部分：所有的元素都放在一个div中，然后将这个div分为了三个部分，第一个部分使用nav，把鸟类相册标题放在里面。然后是两个div部分，第一个div部分，里面又分为了两个部分，第一部分...
Visual
 Studio 2012 年页督察是与集成的浏览器的 web 开发工具。中集成浏览器中，选择任意元素，页面检查器立即突出显示该元素的源代码和 CSS。可以浏览任何
 MVC 视图、 快速查找呈现标记的来源和使用右内的 Visual Studio 环境浏览器工具。观看视频
本教程演示如何启用检查模式，然后快速地找到并编辑您的 web 项目内的标记和 CSS。本教程使用...