CSS 实现尖角样式

最新推荐文章于 2023-11-22 12:00:24 发布

原创

最新推荐文章于 2023-11-22 12:00:24 发布 · 2.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

本文介绍了如何使用CSS来实现尖角效果。通过结合使用伪元素、定位和负边距，可以创建出尖角，具体实现分为思路解析和代码展示两部分。

CSS 实现尖角样式

实现思路

实现一个CSS的尖角样式，思路为用两个尖角，我是用的是一个before一个div、将其放到指定的位置，一个小一点作为尖角另外一个大一点作为尖角的border。然后使用position定位以及负的margin将其定位上去即可代码如下。

实现代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body { /*  清除选择的颜色 */
            -moz-user-select: none; /*火狐*/
            -webkit-user-select: none; /*webkit浏览器*/
            -ms-user-select: none; 
            user-select: none;
        }
        .drop-list-btn{
            background:#41464b;
            box-shadow:0 4px 12px 0 rgba(0,0,0,0.20);
            border-radius:2px;
            width:168px;
            height:56px;
            margin: 0 auto;
            cursor: pointer;
        }
       .drop-list-btn span{
            font-family:PingFangSC-Medium;
            font-size:24px;
            color:#ffffff;
            letter-spacing:0;
            line-height:24px;
            text-align:center;
            display: inline-block;
            position: relative;