主页 / 问题 / 875864
Accepted
elik
Asked:2020-08-31 21:06:50 +0000 UTC2020-08-31 21:06:50 +0000 UTC

如何制作这种类型的地图？

  • 772

我所要做的就是让她变成这样

.circus{
  width: 100px;
  height: 100px;
  background-color: #1798D8;
  border-radius: 50px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: arial;
}

.circus div:nth-child(1){
  font-size: 44px;
  letter-spacing: 2px;
}

.circus div:nth-child(2){
  font-size: 26px;
  letter-spacing: normal;
}


.section-price{
    background: aqua;
    -webkit-clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%, 0 28%);
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 25%);
    display: inline-block;
}

.section-price-content{
    background: white;
-webkit-clip-path: polygon(10% 1%, 99% 1%, 99% 99%, 1% 99%, 1% 25%);
clip-path: polygon(11% 1%, 99% 1%, 99% 99%, 1% 99%, 1% 26%);
    display: inline-block;
    box-sizing: border-box;
    padding: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>

<div class="section-price">
    <div class="section-price-content">
        <p>Сказачное заморское яство</p>
        <h2>Нямушка</h2>
        <h3>с рыбой</h3>
        <ul>
            <li>10 порций</li>
            <li>мышь в подарок</li>
        </ul>
      <div class="circus">
    <div>0,5</div>
    <div>кг</div>
</div>
 </div>
</div>


</body>
</html>

但应该是这样的 在此处输入图像描述

如何使它正确？在哪里舔猫以及如何

html

3 个回答

  1. Best Answer

    第二种选择

    * {
  margin: 0;
  padding: 0;
}

.svg-ramp {
  width: 250px;
}

.card {
  display: inline-block;
  position: relative;
}

.content {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 60%;
}

.content p {
  white-space: nowrap;
  font-size: 80%;
}

.content h2 {
  font-size: 180%;
}

.content ul {
  transform: scale(.7)translateX(-30px)translateY(18px);
  white-space: nowrap;
  LIST-STYLE: NONE;
}

h3,
p {
  line-height: 24px;
  transform: translateY(20PX);
}

.content img {
  position: absolute;
  top: 100%;
  left: 0;
  transform: translate(-30px, 30px);
}

.actia {
  position: absolute;
  right: 0;
  top: 100%;
  background: lightblue;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  line-height: 18px;
  text-align: center;
  color: #fbfbfb;
  transform: translate(0, 50px);
}

.actia div {
  transform: translateY(10px);
}
    <div class="card">
  <div class="svg-ramp">
    <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 116 137">
   <g transform="translate(-2,-156)">
    <path d="m 15.610355,174.94031 18.89881,-16.63095 H 113.50619 V 290.60103 H 4.2710695 L 3.8930933,185.52364 Z"  style="fill:#fff;stroke:#ff8700;stroke-width:3;" /> </g>
</svg>
  </div>
  <div class="content">
    <p>какое то описание</p>
    <h3>Название</h3>
    <p>с фуа-гра</p>
    <ul>
      <li>10 порций</li>
      <li>мышь в подарок</li>
    </ul>
    <img src="http://pngimg.com/uploads/cat/cat_PNG50434.png" alt="" width="60px">
    <div class="actia">
      <div>0,5</div>
      <div>кг</div>
    </div>
  </div>
</div>

    • 2

  2. 说真的，你需要做这样的事情。

    div.card {
  position: relative;
  height: 900px;
  width: 520px;
  border: 8px solid #4497d3;
  overflow: hidden;
  border-radius: 0px 20px 20px 20px;
  -webkit-clip-path: polygon(86px 0, 0 86px, 0 100%, 100% 100%, 100% 0);
  clip-path: polygon(86px 0, 0 86px, 0 100%, 100% 100%, 100% 0);
  background-color: white;
  float: left;
  color: black;
  margin: 10px;
  padding: 30px 20px 20px 80px;
}

div.card:before {
  position: absolute;
  content: '';
  left: 0px;
  z-index: -1;
  height: calc(86px - 8px * 0.6);
  width: calc(86px - 8px * 0.6);
  background-color: #4497d3;
  top: 0px;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 0%);
  clip-path: polygon(0 0, 0 100%, 100% 0%);
}

body {
  background-image: radial-gradient(circle, #464646 0%, #000000 100%);
}

.z1 {
  font: 24pt sans-serif;
  color: #666666;
}

.z2 {
  font: 68pt sans-serif;
}

.z3 {
  font: 40pt sans-serif;
}

.z4 {
  font: 60pt sans-serif;
}

.z5 {
  font: 24pt sans-serif;
}

.cardimg img {
  max-width: 650px;
  max-height: 700px;
  position: absolute;
  left: 40px;
  bottom: -120px;
  z-index: -1;
}

div.stamp {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  background-color: #4497d3;
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: -1;
  color: white;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  padding: 20px;
}
    <div class="card">
  <span class="z1">Сказочное заморское яство</span><br/>
  <span class="z2">Нямушка</span><br/>
  <span class="z3">с фуа гра</span><br/>
  </br>
  <span class="z1">10 порций<br/>мышь в подарок</span>
  <div class="cardimg"><img src="http://pngimg.com/uploads/cat/cat_PNG50434.png" alt=""></div>
  <div class="stamp">
    <span class="z4">0,5</span><br/>
    <span class="z5">КГ</span>
  </div>
</div>

    • 1

  3. 好像是什么bug。。

    *{
  margin:0;
  padding:0;
  list-style:none;
  
}

html,body{
  height:100%;
  background:linear-gradient(135deg,pink 55%, red 20%,blue 100%);
}
.card{
  min-width:460px;
  max-width:460px;
  min-height:585px;
  max-height:585px;
  overflow:hidden;
  margin:auto;
}
.items{
  width:90%;
  height:500px;
  margin:auto;
  background:transparent;
  transform:translateY(40px);
  border:6px solid blue;
  border-top:6px solid transparent;
  border-left:6px solid transparent;
  position: relative;
}

.items:after{
  content:"";
  width:0;
  height:84.5%;
  position: absolute;
  left:-5px;
  top:80px;
  bottom:0;
  border:3px solid blue;
  background:blue;
}

.items:before{
  content:"";
  width:80%;
  height:0;
  position: absolute;
  right:-4px;
  top:-5px;
  border:3px solid blue;
  background:blue;
}

.line{
  width:120px;
  height:6px;
  position: absolute;
  background:blue;
  transform:rotate(-45deg)translate(-40px,10px);
}

.content{
  position: absolute;
  top:10px;
  bottom:0;
  width:80%;
  background:rgba(255,0,0,0);
  left:12%;
  text-align:center;
  text-transform:lowercase;
}
h1{
  text-transform:uppercase;
}

.img1{
  display:block;
  width:75%;
  height:250px;
  position: absolute;
  bottom:0;
  left:0;
}
p,
.list{
  text-align:left;
  transform:translateX(40px);
}
.actia{
  width:150px;
  height:150px;
  background:lightblue;
  border-radius:50%;
  position: absolute;
  bottom:20px;
  right:20px;
  font-size:2em;
  line-height:40px;
  font-weight:900;
}

.actia div{
  transform:translateY(35px);
}
    <div class="card">
  <div class="items">
    <div class="line"></div>
    <div class="content">
      <h2>Какой то текст </h2>
      <h1>Название</h1>
      <p>с фуа-гра</p>
      <ul class="list">
        <li>10 порций</li>
        <li>мышь в подарок</li>
      </ul>
      <img src="http://pngimg.com/uploads/cat/cat_PNG50517.png" alt="cat" class="img1">
      <div class="actia">
        <div>0,5</div>
        <div>кг</div>
      </div>
    </div>
  </div>
</div>

    • 0

相关问题