4

cssだけを使ってこの画像を再現しようとしています

ここに画像の説明を入力してください

radiusプロパティで遊んだことがありますが、ご覧のとおり、同じ角度効果は得られません。

.shape{
background-color: black;
opacity:0.9;
filter:alpha(opacity=90); /* For IE8 and earlier */    
    color:white;
    font-weight:bold;
    padding: 30px 30px 30px 50px;
    text-align:center;
    position:absolute;
    right:0;
    bottom:0;
    z-index:1003;
    font-size: 20px;    
    border-top-left-radius: 125px;
    -moz-border-radius-topright: 125px;
}
​

私が試したことはhttp://jsfiddle.net/ymorin007/7qX4U/で見ることができます

ありがとう。

4

2 に答える 2

5

クロスブラウザ互換ではないかもしれませんが、これはあなたを近づけるでしょう:)

.shape{
    background-color: black;
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */    
    color:white;
    font-weight:bold;
    padding: 30px 30px 30px 50px;
    text-align:center;
    position:absolute;
    right:0;
    bottom:0;
    z-index:1003;
    font-size: 20px;    
    border-top-left-radius: 125px;
    -moz-border-radius-topright: 125px;
}

.shape::before{
   content:"";
   width:0;
   height:0;
   position:absolute;
   left:-34px;
   border-left: 53px solid transparent;
   border-right: 53px solid transparent;    
   border-bottom: 53px solid black;
}
​

フィドル： http： //jsfiddle.net/pggRb/

于 2012-11-30T16:25:55.320 に答える
1

テストをヒットする必要がある場合は、歪んだ疑似要素の使用を検討することをお勧めします。

div {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 50px;
  width: 200px;
  background: gray;
  cursor: pointer;
  transition: all 0.6s;
}
div:before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 100%;
  height: 100%;
  background: inherit;
  transform: skewX(-45deg);
  border-radius: 20px 0 0 0;
  z-index: -1;
}
div:hover {
  background: tomato;
  ]
<div>SOME TEXT</div>

于 2015-05-22T11:55:19.467 に答える