forma personalizzata blocco

Question

ho bisogno di creare tale elemento per la pagina web:

Come vedete, 3 angoli sono arrotondati e 1 angolo è inclinata. Il bordo dovrà essere modificato durante diversi stati del blocco. Ci sarà anche uno sfondo di foto sotto questo elemento.

Tutte le soluzioni CSS e JS disponibili per questo sono brutte e ingombranti.

La mia idea è: possiamo usare un elemento svg per disegnare questa forma e quindi essere in grado di manipolare i colori dei bordi come necessario in seguito con js?

C'è questo elemento SVG con gli angoli arrotondati:

<svg width="400" height="180"> 
    <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"> 
    Sorry, your browser does not support inline SVG. 
</svg> 

che richiama questo:

La mia domanda è: possiamo fare uno degli angoli inclinati in questo file SVG e quindi inserire il contenuto in esso? Forse tramite l'alimentazione di questo svg come sfondo dell'elemento.

Answer 1

No javascript HTML/CSS solo

Per rendere la forma che si desidera è necessario utilizzare poligono non rect:

Ho testato questa e le seguenti opere:

.foo { 
 
     position:relative; 
 
     top:25px;  
 
     left:215px; 
 
     float:left; 
 
    }

<hr>Just to prove adding content moves move svg an its content down<hr><hr> 
 
    <div class="foo">my text and stuff <br><img src="http://blog.spoongraphics.co.uk/wp-content/uploads/2014/low-poly/tiger-poly-lg.jpg" height="100px"></div> 
 
    <svg width="400" height="400"> 
 
     <polygon points="50 250,400 250,400 7,108 4,53 62" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"> 
 
    </polygon> 
 
    Sorry, your browser does not support inline SVG. 
 
    </svg> 
 

 

 

 

Answer 2

1. Se si collega l'SVG con i CSS, penso che non sia possibile manipolarne lo stile con JS, ma se si include SVG in HTML, sarà possibile farlo.

2. E 'possibile effettuare l'angolo smussato usando SVG <path> tag, è davvero complesso per rendere la forma desiderata a mano, in modo da suggerisco di utilizzare un vector graphics editor tool, per creare la forma e l'esportazione come SVG. Raccomando CorelDraw o Adobe Illustrator, se ne hai uno o Inkscape, che è gratuito

Answer 3

Ho provato a ricreare la forma in css. Come hai detto, è un po 'insoddisfacente e laborioso, ma lo condividerò comunque.

Tuttavia, funziona solo sui browser moderni.

.box{ 
 
    border:5px solid orange; 
 
    background-color:#eee; 
 
    width:100px; 
 
    height:100px; 
 
    padding:30px; 
 
    border-radius:20px; 
 
    position:relative; 
 
} 
 
.box::after{ 
 
    content:''; 
 
    position:absolute; 
 
    top: -23px; 
 
    left: -25px; 
 
    width:40px; 
 
    height:40px; 
 
    border-right:5px solid orange; 
 
    background:#fff; 
 
    transform:rotate(45deg); 
 
}

<div class="box">Content</div>

Answer 4

Una soluzione CSS: div

1. pareggio con bordi arrotondati
2. aggiuntivo: prima di inserire triangolo colorato di confine sul alto a
3. aggiuntivo: dopo al posto triangolo colorato leggermente più piccolo sopra: prima del triangolo

#card { 
 
    height: 400px; 
 
    width: 200px; 
 
    border: 3px solid blue; 
 
    border-radius: 10px; 
 
    background-color: tan; 
 
    position: relative; 
 
} 
 

 
#card:before { 
 
    content:""; 
 
    height:0; 
 
    width: 0; 
 
    position: absolute; 
 
    top:-3px; 
 
    left:-3px; 
 
    border-top: 35px solid blue; 
 
    border-right: 35px solid transparent; 
 
} 
 

 
#card:after { 
 
    content: ""; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    top: -3px; 
 
    left: -3px; 
 
    border-top: 30px solid white; 
 
    border-right: 30px solid transparent; 
 
}

<div id="card"></div>

Per uno SVG, è possibile disegnare la casella utilizzando un percorso:

<svg height="155" width="155"> 
 
<path style="opacity:0.5;stroke:#000000;stroke-width:5;fill:#ff0000;" d="M42.7,2.5,2.5,42.7,2.5,132c0,11.1,8.92,20,20,20h110c11.1,0,20-8.92,20-20v-110c0-11.1-8.92-20-20-20h-89.8z"/> 
 
</svg>

Answer 5

È possibile manipolare uno SVG con JavaScript, ma è risponderà anche alle modifiche CSS.

Se si dispone di uno SVG con id mysvg e un elemento path con id myborder, è possibile definire uno stile per il percorso di confine:

#mysvg #myborder { 
    stroke: orange; 
} 

È possibile manipolare lo SVG direttamente, o definire stili come normale. La cosa più semplice da fare è manipolare una classe wrapper div. Questo perché la manipolazione di stili HTML è più facile che SVG e gioca più con JS e JS librerie standard:

<div id="myshape"> 
    <svg id="mysvg" height="600" width="400"> 
     <path id="myborder" d="..." stroke="blue" stroke-width="5"> 
    </svg> 
    <div id="content">Content</div> 
</div> 

Poi si possono avere queste classi:

#myshape #mysvg #myborder { 
    stroke: blue; 
} 

#myshape.hilite #mysvg #myborder { 
    stroke: orange; 
} 

semplicemente modificando la classe padre aggiornerà la tua SVG . Aggiungi/rimuovi la classe hilite al genitore div in questo caso per cambiare il colore del bordo.

Esempio: http://jsfiddle.net/jtbowden/ssrker2h/2/

Il JS non è necessario per il cambiamento, ma sto usando per modificare la classe. Questo potrebbe essere altrettanto facilmente fatto con un attributo hover, ecc solo

CSS esempio:

#content { 
 
    padding: 50px; 
 
    position: absolute; 
 
    top: 25px; 
 
    left: 25px; 
 
    font-size: 42px; 
 
    font-family: Arial; 
 
    font-weight: bold; 
 
} 
 

 
#myshape:hover #myborder { 
 
    stroke: orange; 
 
}

<div id="myshape"> 
 
    <svg id="shape" height="600" width="420"> 
 
     <defs> 
 
      <pattern id="mybackgnd" patternUnits="userSpaceOnUse" width="400" height="590"> 
 
       <image xlink:href="http://placekitten.com/g/400/590" x="0" y="0" width="400" height="590" opacity="0.5" /> 
 
      </pattern> 
 
     </defs> 
 
     <path id="myborder" d="M 20 60 l 40 -40 l 320 0 c 10 0 20 10 20 20 l 0 500 c 0 10 -10 20 -20 20 l -340 0 c -10 0 -20 -10 -20 -20 z" stroke="blue" stroke-width="5" fill="url(#mybackgnd)" />Sorry, your browser does not support inline SVG.</svg> 
 
    <div id="content">Hover Me</div> 
 
</div>