svg+css实现清爽订单卡片效果代码-html代码-BFW代码库

代码语言：html
代码描述：svg+css实现清爽订单卡片效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    :root {
  --clr--neutral--900: hsl(223, 50%, 9%);
  --clr--neutral--800: hsl(223, 49%, 18%);
  --clr--neutral--600: hsl(223, 47%, 23%);
  --clr--primary--400: hsl(245, 75%, 52%);
  --clr--neutral--300: hsl(224, 23%, 55%);
  --clr--neutral--200: hsl(225, 100%, 98%);
  --clr--neutral--100: hsl(0, 0%, 100%);

  --clr--primary--Bblue: hsl(245, 75%, 52%);
  --clr--primary--Pblue: hsl(225, 100%, 94%);
}

* {
  margin: 0;
  padding: 0;
  font-family: "Red Hat Display", sans-serif;
  box-sizing: border-box;
}

/*TYPOGRAPHY & BUTTONS*/

h1 {
  font-size: 1.35rem;
  font-weight: 900;
  margin-bottom: 0.8em;
  text-align: center;
  color: var(--clr--neutral--900);
}

h3 {
  color: var(--clr--neutral--900);
  font-size: 1.25rem;
  margin-bottom: 0.8em;
}

p {
  color: var(--clr--neutral--300);
  font-size: 1rem;
  margin-bottom: 1.25em;
  max-width: 17rem;
}

button {
  height: 1.125rem;
}

body {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  background: url(images/pattern-background-desktop.svg);
  background-color: var(--clr--primary--Pblue);
  background-repeat: no-repeat;
  background-size: contain;
  overflow-x: hidden;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70%;
}

.summary-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 1.5em 1.8em;
  min-width: 375px;
  width: 50%;
  max-width: 33%;
  border-radius: 20px;
  background-color: var(--clr--neutral--100);
  position: relative;
  box-shadow: -5px 30px 25px 10px hsla(223, 32%, 71%, 0.3);
}

#head-svg {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  margin-bottom: 1.5rem;
}

.order-info {
  margin-top: 14rem;
}

.order-text {
  display: grid;
  place-items: center;
  text-align: center;
}

.order-plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.8rem 0;
  width: 100%;
  border-radius: 15px;
  padding: 1.25em 1em;
  background-color: var(--clr--neutral--200);
}

.order-details > * {
  margin: 0;
  padding: 0;
}

.order-details h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.2em;
  margin-right: 3em;
  margin-left: 1.5em;
}

.order-details p {
  margin-right: 3em;
  margin-left: 1.5em;
  font-style: italic;
}

.order-plan a {
  font-weight: 600;
  text-decoration: none;

  margin-right: 0.25em;
}

.order-plan a:hover {
  text-decoration: underline;
  color: var(--clr--neutral--400);
}

.order-actions {
  display: flex;
  flex-direction: column;
}

.btn {
  cursor: pointer;
  height: 3em;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  border-radius: 12px;
  margin: 0.25em 0;
}

.btn-primary {
  background-color: var(--clr--primary--Bblue);
  color: var(--clr--neutral--200);
  box-shadow: -2px 15px 15px 5px hsla(223, 47%, 80%, 0.486);
}

.btn-primary:hover {
  background-color: var(--clr--neutral--800);
  color: var(--clr--neutral--200);
}

.btn-no-outline {
  background: none;
  color: var(--clr--neutral--300);
}

.btn-no-outline:hover {
  background: rgb(211, 0, 0);
  color: var(--clr--neutral--100);
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

.attribution a:hover {
  color: var(--clr--neutral--900);
}
</style>
  <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap" rel="stylesheet">
</head>

<body>

  <!-- HERE IS THE HEADER -->
  <header></header>

  <!-- NAVIGATION BAR GOES HERE -->
  <nav class="nav-bar"></nav>

  <!-- MAIN CONTENT GOES HERE -->
  <main>
    <div class="summary-card">

      <svg id="head-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450"
        height="220">
        <defs>
          <path id="a" d="M0 0h450v220H0z" />
        </defs>
        <g fill="none" fill-rule="evenodd">
          <mask id="b" fill="#fff">
            <use xlink:href="#a" />
          </mask>
          <use fill="#382AE1" xlink:href="#a" />
          <path fill="#1E1FCD" fill-rule="nonzero"
            d="M218.812 46v13.368h1.685v3.623h6.303v77.983l12.758 6.699v-12.891h3.046v14.545l2.984 1.543v112.908L31.9 266.214v-72.237h7.013V124.52h2.548v-9.55h3.045v9.55h14.15l-.001.014v.196c-.01 2.072-.088 19.036-.094 31.525v3.018c.003 5.998.028 10.37.094 10.445.066.075.784.104 1.747.108h.5c2.152-.008 5.071-.108 5.071-.108v36.439h5.786V76.399h7.379v-7.156h3.045V76.4h23.111v6.395h8.79v-13.55h3.045v13.55h4.314v23.771h10.353v42.63h12.18v38.692h6.384v-80.419h8.04V95.156h3.044v12.312h22.117V63.022h6.455v-3.654h25.75V46h3.046zM15.842 147.489v4.151h3.198L25.475 265.9H-8l6.445-114.259H.962v-4.151h14.88z"
            mask="url(#b)" />
          <path fill="#1E1FCD" fill-rule="nonzero"
            d="M422.812 82v13.368h1.685v3.623h6.303v77.983l12.758 6.699v-12.891h3.046v14.545l2.984 1.543v112.908L235.9 302.214v-72.237h7.013V160.52h2.548v-9.55h3.045v9.55h14.15l-.001.014v.196c-.01 2.072-.088 19.036-.094 31.525v3.018c.003 5.998.028 10.37.094 10.445.066.075.784.104 1.747.108h.5c2.152-.008 5.071-.108 5.071-.108v36.439h5.786V112.399h7.379v-7.156h3.045v7.156h23.111v6.395h8.79v-13.55h3.045v13.55h4.314v23.771h10.353v42.63h12.18v38.692h6.384v-80.419h8.04v-12.312h3.044v12.312h22.117V99.022h6.455v-3.654h25.75V82h3.046zm-202.97 101.489v4.151h3.198l6.435 114.259H196l6.445-114.259h2.517v-4.151h14.88z"
            mask="url(#b)" />
          <g fill-rule="nonzero" mask="url(#b)">
            <path fill="#FFF"
              d="M224.743 27.894c-.147-2.117-9.625 4.042-9.625 4.042s8.029-6.159 7.34-7.698c-.688-1.54-9.734 5.196-9.734 5.196s8.257-6.351 6.982-7.707c-1.275-1.357-10.093 5.782-10.093 5.782s8.992-7.9 5.56-8.092c-1.541-.082-13.643 8.138-26.754 18.008 3.67 4.582 7.34 9.008 11.304 13.288 4.202-4.344 7.514-7.799 7.964-8.376 1.348-1.732 14.744-.577 14.799-2.694.055-2.117-8.826-3.08-8.826-3.08s11.23-6.552 11.083-8.669z" />
            <path fill="#231F20"
              d="M199.667 51.125a.404.404 0 01-.302-.128c-3.524-3.812-7.12-8.037-11.332-13.316a.421.421 0 01-.091-.311.458.458 0 01.165-.284c9.698-7.332 24.837-18.081 27.002-18.081.485-.046.942.234 1.12.687.293.825-.734 2.346-2.083 3.877 2.514-1.677 5.028-2.97 5.817-2.126.186.2.273.471.238.742-.064.751-.917 1.833-2.055 3.033 1.725-1.017 3.34-1.787 4.083-1.594a.77.77 0 01.55.43c.45.963-1.275 2.924-3.284 4.766 2.156-1.155 4.34-2.09 5.175-1.668a.834.834 0 01.468.715c.137 1.98-7.157 6.561-10.286 8.43 2.863.395 8.01 1.375 7.964 3.355 0 1.439-3.037 1.677-7.945 1.933-2.863.156-6.423.349-6.937 1.008-.514.66-3.028 3.281-7.991 8.413a.45.45 0 01-.276.12zM188.96 37.498c3.955 4.949 7.34 8.972 10.717 12.6 5.817-6.01 7.34-7.679 7.624-8.018.697-.916 3.322-1.1 7.551-1.329 2.496-.137 7.139-.384 7.157-1.118 0-1.072-4.367-2.208-8.45-2.657a.413.413 0 01-.358-.33.421.421 0 01.192-.45c5.441-3.152 11.01-7.11 10.937-8.247-.569-.394-4.68 1.613-8.982 4.408a.422.422 0 01-.477-.687c4.138-3.171 7.496-6.534 7.184-7.194-.615-.303-4.799 2.144-9.093 5.36a.422.422 0 01-.514-.668c2.634-2.034 6.845-5.728 6.955-6.983v-.1c-.514-.57-5.074 2.208-9.551 5.818a.432.432 0 01-.587-.064.403.403 0 010-.577c3.202-2.823 6.477-6.415 6.184-7.23 0-.083-.211-.12-.376-.129-1.257-.064-11.543 6.653-26.113 17.595z" />
            <path fill="#231F20"
              d="M153.058 68.876c-2.698 8.514 13.597 47.837 13.597 47.837l20.186-24.917c-.45-.77-10.653-18.493-10.653-18.493s15.057-13.92 23.452-22.59c-3.945-4.28-7.67-8.743-11.304-13.288-16.111 12.133-33.792 26.76-35.278 31.451z" />
            <path fill="#231F20"
              d="M166.655 117.117h-.1a.394.394 0 01-.313-.248c-.67-1.604-16.322-39.543-13.606-48.103 1.532-4.83 19.268-19.52 35.443-31.653a.404.404 0 01.56.064c4.193 5.26 7.78 9.476 11.295 13.27.14.157.14.393 0 .55-7.735 7.991-21.287 20.583-23.241 22.388a54892.79 54892.79 0 0010.505 18.218c.09.14.09.32 0 .459l-20.185 24.908a.404.404 0 01-.358.147zm21.635-79.133c-15.23 11.473-33.379 26.393-34.865 31.011-2.44 7.698 11.258 41.853 13.322 46.93l19.617-24.166-10.506-18.255a.421.421 0 01.083-.504c.146-.137 14.827-13.746 23.176-22.296-3.376-3.666-6.826-7.716-10.827-12.72z" />
            <path fill="#FFF"
              d="M201.044 109.529c1.651 11.418 9.257 21.077 17.515 29.902 4.945 5.242 11.01 10.576 18.25 10.237 3.458-.174 6.706-1.66 9.725-3.345a73.677 73.677 0 0019.974-16.212 4.476 4.476 0 01-4.468-3.995 8.854 8.854 0 009.175-1.027c5.615-4.453 2.89-8.385-1.404-11.702a51.724 51.724 0 01-15.551-19.62c-5.359-11.97-16.002-27.96-31.765-24.313-15.157 3.5-19.268 17.082-21.36 30.553a31.9 31.9 0 00-.091 9.522z" />
            <path fill="#231F20"
              d="M236.13 150.098c-7.111 0-13.02-5.223-17.874-10.383-7.753-8.247-15.91-18.264-17.625-30.122a32.412 32.412 0 01.064-9.696c.918-5.773 2.376-13.169 5.835-19.162a23.56 23.56 0 0115.837-11.74c7.193-1.658 20.937-.678 32.25 24.551a51.119 51.119 0 0015.424 19.465c3.211 2.483 4.716 4.665 4.734 6.882 0 1.833-1.11 3.72-3.33 5.499a9.276 9.276 0 01-8.854 1.384 4.12 4.12 0 003.899 2.886.413.413 0 01.395.239.403.403 0 01-.065.449 73.292 73.292 0 01-20.084 16.358c-2.835 1.576-6.24 3.216-9.91 3.39h-.697zm-9.295-80.773c-1.439 0-2.873.164-4.276.486-14.89 3.446-18.91 16.55-21.038 30.242a31.616 31.616 0 00-.064 9.439c1.679 11.638 9.744 21.536 17.432 29.674 4.882 5.186 10.818 10.447 17.92 10.08 3.495-.165 6.789-1.76 9.542-3.29a72.532 72.532 0 0019.267-15.533 4.924 4.924 0 01-4.018-4.316.403.403 0 01.183-.376.395.395 0 01.413 0 8.431 8.431 0 008.707-.972c2.01-1.603 3.028-3.225 3.01-4.83 0-1.905-1.45-3.94-4.404-6.222a52.017 52.017 0 01-15.672-19.776c-9.074-20.308-19.662-24.606-27.002-24.606z" />
            <path fill="#FFF"
              d="M305.851 145.37c-.642 2.538-11.184 21.343-11.184 21.343l13.763 7.432s12.45-20.84 13.514-22.223c1.065-1.384 10.093-13.398 11.323-17.613 1.23-4.216-7.45-7.332-11.01-6.993-3.56.34-15.763 15.515-16.406 18.054z" />
            <path fill="#231F20"
              d="M308.411 174.567a.361.361 0 01-.193-.055l-13.762-7.432a.403.403 0 01-.202-.257.394.394 0 010-.32c3.67-6.48 10.634-19.246 11.139-21.234.679-2.694 13.02-18.044 16.744-18.328 2.707-.23 8.35 1.41 10.616 4.15a3.598 3.598 0 01.844 3.373c-1.312 4.582-11.295 17.632-11.386 17.76-1.046 1.348-13.369 21.994-13.497 22.178a.395.395 0 01-.303.165zm-13.166-8.028l13.02 7.047c1.678-2.813 12.33-20.62 13.33-21.92 2.102-2.75 10.149-13.637 11.25-17.477a2.747 2.747 0 00-.689-2.611c-2.064-2.502-7.431-4.06-9.89-3.85-3.358.294-15.451 15.58-16.011 17.742-.606 2.392-9.487 18.347-11.01 21.069z" />
            <path fill="#231F20"
              d="M301.897 153.498l-12.295 14.975-26.516-17.751-11.295 21.004s37.554 28.161 42.876 25.467c5.321-2.694 21.442-35.924 21.442-35.924l-14.212-7.77z" />
            <path fill="#231F20"
              d="M293.814 197.761c-7.744 0-38.6-22.965-42.27-25.714a.412.412 0 01-.11-.514l11.294-21.004a.404.404 0 01.578-.147l26.195 17.55 12.066-14.663a.395.395 0 01.504-.1l14.258 7.77a.412.412 0 01.165.532c-.66 1.366-16.267 33.385-21.662 36.107-.32.141-.67.204-1.018.183zm-41.509-26.154c10.607 7.927 38.031 27.327 42.206 25.229 4.853-2.466 19.387-31.855 21.103-35.392l-13.616-7.433-12.084 14.718a.386.386 0 01-.532.083l-26.158-17.513-10.919 20.308zM313.155 116.878l-.12 36.62h17.351v-36.62z" />
            <path fill="#231F20"
              d="M330.386 153.938h-17.35a.404.404 0 01-.404-.412l.11-36.657a.413.413 0 01.413-.403h17.23c.224 0 .404.18.404.403v36.657a.403.403 0 01-.403.412zm-16.938-.806h16.516v-35.85H313.54l-.092 35.85z" />
            <path fill="#FFF" d="M314.916 120.113l-.091 28.776h13.781v-28.776z" />
            <path fill="#231F20"
              d="M328.606 149.301h-13.763a.404.404 0 01-.294-.119.403.403 0 01-.119-.302l.083-28.767a.422.422 0 01.422-.412h13.689c.228 0 .413.184.413.412v28.776a.413.413 0 01-.431.412zm-13.36-.861h12.938v-27.905h-12.846l-.091 27.905z" />
            <path fill="#FFF"
              d="M305.099 147.276s-2.587-12.335 1.294-14.269c3.88-1.933 17.221-4.197 15.157-1.173s-9.294 4.894-9.294 4.894 1.486 4.316-.147 7.377" />
            <path fill="#231F20"
              d="M305.099 147.688a.404.404 0 01-.404-.33c-.11-.513-2.615-12.674 1.514-14.727 3.35-1.658 14.157-3.794 15.735-1.997a1.09 1.09 0 01-.055 1.438c-1.835 2.75-7.496 4.49-9.11 4.95.339 1.2 1.11 4.636-.303 7.33a.422.422 0 01-.57.165.43.43 0 01-.173-.568c1.532-2.859.137-6.992.119-7.038a.412.412 0 010-.33.44.44 0 01.266-.21c.073 0 7.101-1.833 9.056-4.72.137-.202.174-.348.11-.422-.991-1.136-11.01.367-14.735 2.2-2.946 1.466-1.762 10.456-1.065 13.801a.412.412 0 01-.32.495l-.065-.037z" />
            <path fill="#75ECCA"
              d="M209.173 123.32l-22.855-39.185-25.69 28.491 9.541 20.546s-14.68 34.705-14.68 102.73c0 0 78.154-.339 97.825-.339l-25.69-39.91s6.423-18.493 9.735-23.112l19.13 10.402 22.37-30.434-69.686-29.188z" />
            <path fill="#231F20"
              d="M208.843 160.674c12.615 7.331 15.597-22.47 16.157-28.922.256-1.775.15-3.583-.312-5.316-.725-2.199-2.422-3.903-4.12-5.498-2.027-1.833-4.367-3.757-7.129-3.876a8.26 8.26 0 00-6.578 3.436 20.15 20.15 0 00-3.156 6.983c-2.973 10.365-2.863 21.307 2.871 30.728a6.591 6.591 0 001.991 2.263l.276.202z" />
            <path fill="#231F20"
              d="M212.614 162.232a7.934 7.934 0 01-3.973-1.21l-.285-.174a6.903 6.903 0 01-2.12-2.401c-5.256-8.642-6.2.........完整代码请登录后点击上方下载按钮下载查看