CSS定義形狀橢圓

我試圖使用CSS做如下定義形狀：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。

來源

2016-12-06 uneeb meer

這是你要搜索的內容？

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

來源

2016-12-06 13:11:49

這正是我一直在尋找！ thanks男人 –

@uneebmeer如果你想使用一個陰影，添加'box-shadow：0 20px 20px -20px rgba（0，0，0，0.5）'到橢圓。如果這解決了你的問題，請記住接受這個答案。 –

真的很感激帕特里克！保持良好的工作 –

請試試這個。我不確定它是否符合您的要求。

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

來源

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

來源

2016-12-06 13:10:21

CSS定義形狀橢圓

回答

相關問題