主页 / 问题 / 1591514
Accepted
Єськіна Анна Андр
Asked:2024-08-22 03:29:07 +0000 UTC2024-08-22 03:29:07 +0000 UTC

如何在标题块中绘制这个“图案”？ （CSS）

  • 772

已应用以下标题样式

.header {
    position: relative;
    background-image: url(../img/main-picture.jpeg);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
    min-height: 100vh;
    position: relative;
    border-radius: 20px;
    margin-bottom: 77px;
}

我知道我需要使用 :before，但我无法画出任何类似的东西，并且已经搜索了整个互联网。帮助在此输入图像描述

html

1 个回答

  1. Best Answer

    在这种情况下，图很简单，我会用它来实现它radial-gradient：

    body {margin: 0;}

.banner {
  display: block;
  width: 100%;
  height: 95vh;
  border-radius: 0 0 20px 20px;
  background-image:
    radial-gradient(ellipse at top left, transparent calc(72.5% - .99px), #fff 72.5%),
    radial-gradient(ellipse at top right, transparent calc(72.5% - .99px), #fff 72.5%),
    url('https://i.imgur.com/T4sV3Qz.png');
  background-repeat: no-repeat;
  background-position:
    calc(50% - 30px) 100%,
    calc(50% + 30px) 100%,
    center center;
  background-size: 
    60px 30px,
    60px 30px,
    cover;
}
    <div class="banner"></div>

    • 1

相关问题