Abgewinkelt, Verpackung CSS-Band über Bild

Es möglich ist, diese Band, die nur mithilfe von CSS?

Abgewinkelt, Verpackung CSS-Band über Bild

Haben Sie versucht, alles...warum nicht, - position und-image?
wenn Sie verlassen aus der kleine wrap-around-Kanten, es ist ganz einfach. Obwohl IE8 und unten nicht unterstützen würde.
Als Rchristiani sagte 1 ein transparentes PNG, das ist absolut positioniert, kann leicht den trick tun. Wird es erfordern, pixelgenau und nicht "flexibel" sondern gut cross-browser. 2 CSS3-Transformationen möglicherweise etwas, das könnte flexibler sein, aber mehr verlieren, cross-browser-Fähigkeit. Sie könnten auch das prob. tun 3"Schiebetür" wie Technik, um mit mehreren Bildern, um etwas flexibler. #1 wäre am einfachsten zu implementieren.
Danke, ich weiß, das archiviert werden kann mit einem Bild :). Frage ist: ist das design gut erreichbar mit nur CSS. @Jason ich hätte Interesse an deiner Lösung, da ich kann nicht scheinen, um schneiden Sie die nachlaufenden enden der overlay richtig.
Ich arbeite an einem JSFiddle für Sie. Ich habe dies getan, bevor, so dass ich weiß, es ist möglich.

InformationsquelleAutor AlecRust | 2012-10-25

  1. 12

    HTML:

    <div class="box">
    <div class="ribbon">
        <div class="txt">
            Example Text
        </div>
    </div>
<div>​

    CSS:

    .box {
    width: 300px;
    height: 300px;
    background-color: #a0a0a0;
    position: relative;
}
.ribbon {
  -webkit-transform: rotate(-45deg); 
     -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
       -o-transform: rotate(-45deg); 
          transform: rotate(-45deg); 
    border: 25px solid transparent;
    border-top: 25px solid #757575;
    position: absolute;
    bottom: 20px;
    right: -50px;
    padding: 0 10px;
    width: 120px;
    color: white;
    font-family: sans-serif;
    size: 11px;
}
.ribbon .txt {
    position: absolute;
    top: -20px;
    left: 20px;
}​

    Beispiel:

    http://codepen.io/gilluminate/pen/jusoI

    (PS. Alles, aber die Drehung ist immer noch zu funktionieren in älteren Browsern.)

    Fantastisch, danke! Nur was fehlt, ist das wickeln um die Ränder, ich könnte in der Lage sein, das zu umgehen, mit @mprquinn Lösung.
    Die fiddle-link funktioniert nicht mehr. Ist es immer noch da draußen?
    Ja, sorry @Jaromjj, ich zog es zu Codepen: codepen.io/gilluminate/pen/jusoI

    InformationsquelleAutor Jason

  2. 2

    Es ist möglich, mit einigen CSS-Transformationen, die leider nicht universell unterstützt. Finden Sie (schnell) Beispiel hier:
    http://codepen.io/anon/pen/kBpcK

    Danke! Ich mag die Art, wie Sie erzielt die Verpackung. Habe immer noch nicht eine Lösung gefunden, um das trimmen der Kante der Band, um das design passen, es sieht wie ein Bild, ist der einzige Weg, dies zu erreichen.

    InformationsquelleAutor mprquinn

  3. -2

    Ja, Sie können.

    Beispiel: 

    <div id="full_img_content">
 <span id="img_ribbon">  
   <img src="#" id="">
 </span>
</div>

    in CSS hätte man 

    #full_img_content
{
 float:left;
 width:400px; (slightly larger than image width)
 height:400px; (slightly larger than image height)
}
#full_img_content img //your image (if your img have this size)
{
 width:390px;
 height:390px;
 z-index: 1;
}
#img_ribbon
{
 background-image: url("link to img");
 background-positiom: x-pos y-pos bottom right;
 z-index: 2;
}
    Das wird ein Bild für das overlay, ich bin auf der Suche nach einer CSS-Lösung, fürchte ich.

    InformationsquelleAutor Tiago

Schreibe einen Kommentar