Custom shaped block

Question

I need to create an element like this for a webpage:

As you can see, 3 angles are rounded, and 1 angle is tilted. The boundary should change in different states of the block. There will also be a background photo under this element.

All CSS and JS solutions for this are ugly and cumbersome.

My idea: can we use the svg element to draw this shape, and then be able to manipulate the colors of the borders as needed using js?

This svg element has rounded corners:

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

This does the following:

My question is: Can we make one of the corners be slanted in this svg and then put the content in it? Perhaps if you download this svg as the background of the element.

Answer 1

I tried to recreate the form in css. As you said, this is somewhat unsatisfactory and indecisive, but I will share it anyway.

This will only work in modern browsers.

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

You can manipulate SVG using JavaScript, but it will also respond to CSS changes.

If you have an SVG with mysvg and path with id myborder , you can define a style for the border path:

 #mysvg #myborder { stroke: orange; } 

You can directly manipulate SVG or define styles as usual. The simplest thing is to manipulate the wrapper div . This is because manipulating HTML styles is simpler than SVG and works better with standard JS and JS libraries:

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

Then you can have the following classes:

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

A simple change to the parent class will update your SVG. Add / remove the hilite class hilite parent div in this case to change the border color.

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

JS is not required to change, but I use it to change the class. This could be easily done using the hover attribute, etc.

Example CSS only:

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

Answer 3

Not only javascript html / CSS

To make the shape you need, you need to use a non-rect polygon:

I tested this and the following works:

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

• If you associate SVG with CSS, I think that it is not possible to manage it using JS, but if you include SVG in HTML, you can do it.

• You can make an oblique angle using the SVG <path> tag , it is very difficult to make the desired shape manually, so I suggest you use the vector graphics tool to create the shape and export it as SVG. I recommend CorelDraw or Adobe Illustrator if you have one of them or Inkscape, free

Answer 5

Css solution:

• draw a div with rounded borders
• add: before placing the border of the colored triangle above the top corner.
• add: after applying a slightly smaller color of the color triangle: in front of the triangle

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

For svg, you can draw a window using the path:

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