Question

我正在尝试使用CSS制作以下自定义形状：

我试图让它准确，但仍有一些地方我没有达到完美;这是我的代码：

.oval {
  border: 2px solid #fff;
  transform: skewY(-8deg);
  margin-top: 5%;
  width: 302px;
  height: 124px;
  background: #363636;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 125px / 74px;
}
.blackfriday {
  padding-top: 11%;
  transform: skewY(8deg);
  text-transform: uppercase;
  font-family: roboto-bold;
  text-align: center;
  color: #dce90d;
  font-size: 35px;
  margin: 0;
}
.promotion {
  color: white;
  transform: skewY(8deg);
  text-transform: uppercase;
  font-family: roboto-regular;
  text-align: center;
  font-size: 25px;
  margin: 0;
}

<div class="oval">
  <h4 class="blackfriday">black friday</h4>
  <h5 class="promotion">promotion</h5>
</div>

JS Fiddle

Answer 1

这是你在寻找什么？

.oval {
    background: #363636 none repeat scroll 0 0;
    border: 2px solid #fff;
    border-radius: 100%;
    height: 170px;
    margin-top: 5%;
    transform: rotate(-8deg);
    width: 400px;
}
.blackfriday {
    color: #dce90d;
    font-family: arial;
    font-size: 35px;
    margin: 0;
    padding-top: 14%;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(8deg);
}
.promotion {
    color: white;
    font-family: arial;
    font-size: 25px;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    transform: rotate(8deg);
}

 <div class="oval">
            <h4 class="blackfriday">black friday</h4>
            <h5 class="promotion">promotion</h5>
        </div>

Answer 2

请试试这个。我不确定它是否符合您的要求。

＆＃13;

<!doctype html>
<html>

<head>
    <style>
        .oval {
            border: 4px solid #fff;
            transform: skewY(-8deg);
            margin-top: 5%;
            width: 400px;
            height: 150px;
            background: #363636;
            -moz-border-radius: 100px / 50px;
            -webkit-border-radius: 100px / 50px;
            border-radius: 50% / 50%;
            box-shadow: 10px 77px 31px -67px #888888;
        }
        
        .blackfriday {
            padding-top: 11%;
            transform: skewY(8deg);
            text-transform: uppercase;
            font-family: roboto-bold;
            text-align: center;
            color: #dce90d;
            font-size: 35px;
            margin: 0;
        }
        
        .promotion {
            color: white;
            transform: skewY(8deg);
            text-transform: uppercase;
            font-family: roboto-regular;
            text-align: center;
            font-size: 25px;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class="oval">
        <h4 class="blackfriday">black friday</h4>
        <h5 class="promotion">promotion</h5>
    </div>

</body>

</html>

＆＃13;

Answer 3

.oval{
        border:2px solid #fff;
        transform: skewY(-8deg);
       margin-top:5%;
        width: 302px;
        height: 159px;
        background: #363636;
        -moz-border-radius: 147px / 80px;
        -webkit-border-radius: 147px / 80px;
        border-radius: 147px / 80px;
    }

    .blackfriday{
        padding-top: 17%;
        transform: skewY(8deg);
        text-transform: uppercase;
        font-family: roboto-bold;
        text-align: center;
        color:#dce90d;
        font-size: 32px;
        margin: 0;
    }

.promotion {
    color: white;
    transform: skewY(8deg);
    text-transform: uppercase;
    font-family: roboto-regular;
    text-align: center;
    font-size: 23px;
    margin: 0;
}

CSS自定义形状椭圆形

3 个答案: