Y Blog

Appearance

曲边梯形按钮实现

🕒 Published at:

在网页设计中，为了实现更加独特和吸引人的视觉效果，我们常常需要自定义按钮的外观。如何通过使用阴影和CSS伪元素来创建一个具有曲边的梯形按钮。

实现效果 ​

我们希望实现一个具有如下效果的按钮：

  • 顶部边缘圆角
  • 底部边缘有一个梯形的效果

代码实现 ​

以下是实现这一效果的HTML和CSS代码。

HTML ​

html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>曲边梯形按钮实现</title>
</head>
<body>
    <div style="overflow: hidden; background-color: aqua;">
        <div class="footer-cta-logo-container"></div>
    </div>
</body>

</html>

CSS ​

css
<style>
    .footer-cta-logo-container {
        width: 20%;
        height: 70px;
        padding: 10px 15px;
        display: block;
        margin: 0 auto;
        position: relative;
        background: #fff;
        border-radius: 20px 20px 0 0;
        border: #777 1px solid;
        border-bottom: 0;
    }

    .footer-cta-logo-container::before {
        border-bottom: 1px solid #777;
        content: "";
        position: absolute;
        bottom: 0;
        height: 50px;
        left: -25px;
        width: 25px;
        border-bottom-right-radius: 25px;
        box-shadow: 0px 25px 0px 0px #fff;
    }

    .footer-cta-logo-container::after {
        content: "";
        position: absolute;
        bottom: 0px;
        height: 50px;
        right: -25px;
        width: 25px;
        border-bottom-left-radius: 25px;
        box-shadow: 0 25px 0 0 #fff;
        border-bottom: 1px solid #777;
    }
</style>

代码解析 ​

主容器 ​

.footer-cta-logo-container 是主容器，包含以下样式：

  • width, height, padding：定义了容器的尺寸和内边距。
  • margin：使容器水平居中。
  • position: relative：为伪元素定位提供参考。
  • background: #fff：设置背景颜色。
  • border-radius: 20px 20px 0 0：定义顶部圆角。
  • border: #777 1px solid：设置边框颜色和宽度。

伪元素 ​

::before ​

  • border-bottom: 1px solid #777：设置下边框。
  • content: ""：使伪元素可见。
  • position: absolute：绝对定位。
  • bottom: 0：定位到底部。
  • height: 50px, width: 25px：定义伪元素尺寸。
  • left: -25px：将伪元素向左移动，使其在容器外部。
  • border-bottom-right-radius: 25px：设置右下角的圆角。
  • box-shadow: 0px 25px 0px 0px #fff：通过阴影实现梯形效果。

::after ​

  • content: ""：使伪元素可见。
  • position: absolute：绝对定位。
  • bottom: 0：定位到底部。
  • height: 50px, width: 25px：定义伪元素尺寸。
  • right: -25px：将伪元素向右移动，使其在容器外部。
  • border-bottom-left-radius: 25px：设置左下角的圆角。
  • box-shadow: 0 25px 0 0 #fff：通过阴影实现梯形效果。
  • border-bottom: 1px solid #777：设置下边框。