CSS eigene Form Oval

Ich versuche, die folgende benutzerdefinierte Form mit CSS zu machen:CSS eigene Form Oval

Ich habe versucht, es richtig zu machen, aber immer noch gibt es einige Punkte, wo ich nicht Perfektion erreicht werde; hier ist mein Code:

.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.

Quelle

2016-12-06 uneeb meer

Ist das, was Sie suchen?

.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>

Quelle

2016-12-06 13:11:49

das ist genau das, was ich gesucht habe !! danke mann –

@uneebmeer Wenn du einen Schatten benutzen willst, füge 'box-shadow: 0 20px 20px -20px rgba (0, 0, 0, 0.5)' zum Oval hinzu. Wenn das Ihre Frage gelöst hat, denken Sie bitte daran, diese Antwort zu akzeptieren. –

wirklich schätzen es patrick! Mach weiter so –

Bitte versuchen Sie es. Ich bin mir nicht sicher, ob es Ihren Anforderungen entspricht.

<!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>

Quelle

2016-12-06 13:09:42 Nitheesh

.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; 
}

Quelle

2016-12-06 13:10:21

CSS eigene Form Oval

Antwort

Verwandte Themen