I need to create such element for the webpage:
As you see, 3 corners are rounded and 1 corner is slanted. The border will need to change during different states of the block. There also will be a photo background underneath this element.
All the CSS and JS solutions out there for this are ugly and cumbersome.
My idea is: Can we use an svg element to draw this shape and then be able to manipulate border colors as needed later on with js?
There is this svg element with 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>
That draws this:
My question is: Can we make one of the corners slanted in this svg and then place content in it? Maybe via feeding this svg as background of the element.
Custom Blocks. This document is aimed at developers who wish to create new blocks within Blockly. It is assumed that one has a local copy of Blockly which one can edit, one is generally familiar with Blockly's usage, and one has a basic understanding of JavaScript.
Custom blocks created by Tynker’s community can be customized, saved and deployed in your world! What is Tynker + Minecraft? Tynker makes modding Minecraft easy and fun. Get a private server to deploy mods with 1-click and invite friends to explore and play! Unlock Everything! Ask your parents to enroll in premium!
Blockshapes are essentially block geometries or models that are hard-coded into vanilla, meaning that they exist without having accesible files. They are added in the resource pack's file, blocks.json, using child "blockshape" in a block's object. This would look something like this:
However, in order to interface with an external application, one must create custom blocks to form an API. For example, when creating a drawing program, one might need to create a " draw circle of radius R " block. In most cases the easiest approach is to just find a really similar block which already exists, copy it, and modify it as needed.
I tried recreating the shape in css. As you said it's somewhat unsatisfying and fiddly but i'll share it anyway.
This will only work on modern browsers though.
.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>
You can manipulate an SVG with JavaScript, but it will also respond to CSS changes.
If you have an SVG with id mysvg
and a path
element with id myborder
, you can define a style for the border path:
#mysvg #myborder {
stroke: orange;
}
You can manipulate the SVG directly, or define styles like normal. The easiest thing to do is to manipulate a wrapper div
class. This is because manipulating HTML styles is easier than SVG and plays nicer 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 these classes:
#myshape #mysvg #myborder {
stroke: blue;
}
#myshape.hilite #mysvg #myborder {
stroke: orange;
}
Simply modifying the parent class will update your SVG. Add/remove class hilite
to the parent div
in this case to change the border color.
Example: http://jsfiddle.net/jtbowden/ssrker2h/2/
The JS is not necessary for the change, but I am using it to modify the class. This could just as easily be done with a hover attribute, etc.
CSS only example:
#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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With