CSS 实现尖角样式

最新推荐文章于 2022-10-05 14:41:30 发布

yatsov

最新推荐文章于 2022-10-05 14:41:30 发布

阅读量2k

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/yatsov/article/details/79689386

版权

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

摘要由CSDN通过智能技术生成

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;

最低0.47元/天解锁文章

yatsov

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS 实现尖角样式

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

扫一扫