div+css实现简洁带阴影引用卡片效果代码-html代码-BFW代码库

div+css实现简洁带阴影引用卡片效果代码

代码语言：html

代码描述：div+css实现简洁带阴影引用卡片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">

<link href="https://fonts.googleapis.com/css2?family=Petit+Formal+Script&family=Raleway:wght@500&display=swap" rel="stylesheet">
  

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fefefe;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
  background: #03abd9;
}

.testimonial {
  width: 50%;
  background: #0385be;
  padding: 4em;
  display: flex;
  flex-direction: column;
  border: 5px solid #fefefe;
  border-top: none;
  border-bottom: none;
  position: relative;
}
.testimonial:before, .testimonial:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 36px;
  background-repeat: no-repeat;
}
.testimonial:before {
  top: -10px;
  right: 10%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.5 101"><path fill="white" d="m80.817.554c.458-.025.805-.06,1.152-.06,19.188-.003,38.376-.002,57.564-.002.146,0,.291.011.437.011.491,0,.712.16.712.735.002,19.353.023,38.706.044,58.059.004,3.649-.176,7.285-.832,10.88-.796,4.361-2.397,8.442-4.643,12.241-.975,1.648-2.273,3.106-3.446,4.634-.443.577-.922,1.132-1.426,1.656-1.938,2.015-4.045,3.838-6.374,5.39-3.972,2.648-8.297,4.499-12.973,5.438-2.052.412-4.157.674-6.247.751-4.326.159-8.659.151-12.989.203-.286.003-.572-.07-.917-.115v-19.877c.267,0,.491,0,.714,0,3.833,0,7.667,0,11.5,0,3.384,0,6.55-.847,9.48-2.521,2.537-1.449,4.398-3.513,5.825-6.094,1.849-3.345,2.325-6.94,2.49-10.641.008-.186-.014-.374-.029-.56-.003-.037-.035-.071-.096-.186-.223,0-.488,0-.752,0-12.625,0-25.25,0-37.875,0-.208,0-.42-.027-.624.001-.519.072-.637-.184-.638-.649-.012-3.333-.06-6.666-.061-9.999-.005-15.395.002-30.791.004-46.186,0-1.017,0-2.034,0-3.111Z" /><path  fill="white" d="m10.837,80.498c.303,0,.528,0,.752,0,3.813,0,7.626,0,11.438,0,3.785,0,7.275-1.023,10.442-3.086,2.062-1.343,3.688-3.097,4.776-5.331.269-.552.664-1.042.952-1.586.16-.303.213-.663.323-.994.875-2.647,1.304-5.368,1.354-8.152.003-.187-.008-.375-.019-.562-.003-.06-.027-.119-.059-.254-.244-.011-.505-.034-.765-.034-12.605-.002-25.211-.001-37.816-.002-1.322,0-1.338,0-1.339-1.309-.008-16.417-.011-32.833-.014-49.25,0-2.917.01-5.833-.01-8.75-.003-.473.123-.708.617-.686.249.011.5-.01.75-.01,19.023,0,38.045,0,57.068,0,1.348,0,1.361,0,1.362,1.331.018,19.48.039,38.959.042,58.439,0,4.404-.376,8.765-1.546,13.04-.769,2.809-1.905,5.456-3.306,7.988-.679,1.227-1.481,2.395-2.32,3.52-1.017,1.364-2.061,2.721-3.223,3.96-1.867,1.992-3.953,3.752-6.226,5.276-4.003,2.682-8.364,4.559-13.084,5.497-2.174.432-4.407.686-6.623.766-4.348.158-8.702.133-13.053.197-.476.007-.478-.262-.48-.6-.013-2.166-.05-4.333-.046-6.499.006-4.125.034-8.25.053-12.375,0-.144,0-.288,0-.534Z" /></svg>');
}
.testimonial:after {
  bottom: -10px;
  left: 30%;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 142.5 102"><path fill="white" d="m21.67,40.996c.335,0,.603,0,.871,0,12.729,0,25.459,0,38.188,0,.921,0,.926.004.926.899.015,18.541.031,37.081.042,55.622,0,.979-.041,1.958-.042,2.937,0,.396-.145.583-.554.545-.186-.017-.375-.002-.562-.002-19.271,0-38.542,0-57.813,0-.867,0-.877,0-.887-.881-.026-2.354-.06-4.707-.06-7.061-.005-17.395-.003-34.79-.002-52.185,0-3.335.114-6.66.825-9.937.508-2.34,1.145-4.638,2.073-6.849.447-1.066.846-2.16,1.395-3.173.648-1.195,1.37-2.364,2.178-3.457,.........完整代码请登录后点击上方下载按钮下载查看