3

レスポンシブで高速にするために、画像を使用せずにサイトを作成しています。CSS(3)のみです。CSSを使用して次の効果を実行しようとしています

Illustrator での疑似取り消し線

私はこれを使用して

<div class="strikethrough">
  <span>Ou</span>
</div>

およびCSS（画像を使用）：

.strikethrough {
  background: url('strip.gif') repeat-x 50% 50%;
}

.strikethrough span {
  background: #EAEBEC;
  padding: 0 5px;
  display: inline-block;
  margin: 0 auto;
}

CSSのみを使用して同じことを行うことは可能ですか?

4

3 に答える 3

3 
<div style="height: 1px; text-align: center; background-color: black;">
  <span style="position: relative; top: -0.5em; background-color: white;">
    Ou
  </span>
</div>

また

<fieldset style="text-align: center; border: 0; border-top: 1px solid black;">
  <legend>
    Ou
  </legend>
</fieldset>
于 2013-04-20T05:05:09.323 に答える
0 

div 
{
text-align: center;
}

span
{
display: inline-block;    
}

span:before,
span:after {
border-top: 3px solid #EAEBEC;
display: block;
height: 1px;
content: " ";
width: 48%;
position: absolute;
left: 0;
top: 1.2em;
}

span:after
{
right: 0;  
left: auto; 
}


<div>
    <span>OU</span>
</div>

于 2013-04-20T05:22:34.377 に答える
0

手遅れのようですが、とにかくここにあります。-jsFiddle _

編集- スタイルのコードを追加しdifferent、jsFiddle を更新しました

CSS

.strikethrough{
  box-shadow: 
        0px -10px 0px 0px #EAEBEC inset, inset 0px -11px 0px 0px black;
  background: #EAEBEC;
  padding: 0 5px;
  display: block;
    text-align:center; 
}
.strikethrough span{
    background:#EAEBEC;
}

.different{
    background:white;
}
.different .strikethrough{
  box-shadow: 
        0px -10px 0px 0px #fff inset, inset 0px -11px 0px 0px black;
  background: #fff;
  padding: 0 5px;
  display: block;
    text-align:center; 
}
.different .strikethrough span{
    background:#fff;
}

html

<div class="strikethrough"> <span>&nbsp;Ou&nbsp;</span> </div>

<div class="different">
    <div class="strikethrough"> <span>&nbsp;Ou&nbsp;</span>

    </div>
</div>
于 2013-04-20T05:24:51.590 に答える