CSS组件_0 燕尾

最新推荐文章于 2022-08-29 21:00:57 发布

一只前端小马甲

最新推荐文章于 2022-08-29 21:00:57 发布

阅读量603

点赞数 4

分类专栏： CSS # 组件文章标签： css css3 html 样式组件

本文链接：https://blog.csdn.net/wuxeek/article/details/118631884

版权

CSS 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

组件

1 篇文章 0 订阅

订阅专栏

CSS是传统前端“三大马车”之一，本系列专注于用CSS实现小组件，例如：燕尾、三角、箭头、风火轮等。愿积”组件“之跬步，至”系统“之千里。

一、燕尾是个啥？

燕尾，顾名思义，燕子的尾巴。我们都知道燕子的尾巴是分叉的，本文要实现的组件如下。

燕尾组件

二、小马甲思路

我们很容易想到使用一个长方形来实现，但是长方形的首尾得做一些处理。

使用长方形作为基础

首先，在长方形的首尾添加正方形。

长方形首尾添加正方形

对于首端（左）来说，我们可以通过将正方形平移、旋转的方式形成想要的形状。

在这里插入图片描述

对于尾端（右）来说，进行同样的操作，最终形成了我们需要的燕尾组件。

在这里插入图片描述
下面我们计算下平移、旋转的数值。假设长方形高为h、宽度为w，正方形边长为x。

可以知道平移的距离为x/2，旋转的角度为45°。
在这里插入图片描述
由 $x^2 + x^2= h^2$ 可知，

$\sqrt{\frac{h^2}{2}}$

还有个问题，平移和旋转怎么实现呢？实际上CSS3很容易实现。

平移，通过指定元素postion，然后设置left/right实现
旋转，通过设置元素transform属性实现

三、小马甲实现

我们不妨假设长方形高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>

<body>
    <div class="c-step">燕尾</div>
</body>

四、总结

本文介绍了CSS组件——燕尾的一种实现方式：通过在长方形盒子两端加正方形，利用平移、旋转的手段形成燕尾形状。平移是通过设置元素为absolute，利用left、right属性设置相对于父元素的相对位置实现；选装是通过设置元素的transform属性实现。

基础知识关键字：绝对布局、旋转、CSS

一只前端小马甲

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
6
评论
CSS组件_0 燕尾

CSS是传统前端“三大马车”之一，本系列专注于用CSS实现小组件，例如：燕尾、三角、箭头、风火轮等。愿积”组件“之跬步，至”系统“之千里。目录一、燕尾是个啥？二、小马甲思路三、小马甲实现四、总结一、燕尾是个啥？燕尾，顾名思义，燕子的尾巴。我们都知道燕子的尾巴是分叉的，本文要实现的组件如下。二、小马甲思路我们很容易想到使用一个长方形来实现，但是长方形的首尾得做一些处理。首先，在长方形的首尾添加正方形。对于首端（左）来说，我们可以通过将正方形平移、旋转的方式形成想要的形状。对于尾端（.
复制链接

扫一扫