 Border in shape xml
By : user3301049
Date : March 29 2020, 07:55 AM
With these it helps I am trying to make a drawable to use for a button. I would like it to have this coloring, with a 2px border around it. , It looks like you forgot the prefix on the color attribute. Try code :
<stroke android:width="2dp" android:color="#ff00ffff"/>
|
 Put border on a shape
By : diskotechjam
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , Without changing the HTML, you could always add the border via an absolutely pseudo element. Just be sure to relatively position the parent element. (example) code :
.jologo:after {
content:'';
position:absolute;
background:#f15c5c;
height:40px;
left:0;
width:5px;
}
|
 How do I make half a hexagon shape using CSS with a border over a rectangle with a border with an image in the middle of
By : Shota Ueda
Date : March 29 2020, 07:55 AM
Any of those help How do I make half a hexagon shape with a border and over top a rectangle shape with a border and an image inside the half hexagon shape using CSS and HTML5 , updated with shape and border-colors code :
div {
margin-top:1em;;
text-align: center;
padding: 0.5em;
border-top:1px solid lightgray;
background: linear-gradient(to bottom, #ECECEC 50%, lightgray 50%, lightgray 51%, transparent 52%);
}
img {
position: relative;
display: block;
margin: 10px auto;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
width:320px;
position: relative;
overflow: hidden;
border-top:1px solid lightgray;
background: linear-gradient(to left, lightgray, lightgray) bottom center, linear-gradient(40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom left, linear-gradient(-40deg, transparent 50px, lightgray, 50px, lightgray 52px, #ECECEC 52px)bottom right;
background-repeat: no-repeat;
background-size: 50% 2px, 50% 100%, 50% 100%;
}
<div>
<span>
<img src="http://lorempixel.com/55/46/technics/1" alt="ico"/>
</span>
</div>
div {
text-align: center;
padding: 0.5em;
background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
position: relative;
display: block;
padding: 0.5em 0;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
padding: 0 3em;
position: relative;
overflow: hidden;
}
span:before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
margin-left: -75px;
height: 150px;
width: 150px;
background: gray;
transform: rotate(45deg);
}
<div>
<span>
<img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
</span>
</div>
div {
text-align: center;
padding: 0.5em;
background: linear-gradient(to bottom, gray 50%, black 50%);
}
img {
position: relative;
display: block;
padding: 0.5em 0;
z-index: 1;
}
span {
text-align: center;
display: inline-block;
padding: 0 3em;
position: relative;
overflow: hidden;
background: linear-gradient(40deg, transparent 1.5em, gray 1.5em)bottom left, linear-gradient(-40deg, transparent 1.5em, gray 1.5em)bottom right;
background-repeat: no-repeat;
background-size: 50% 100%;
}
<div>
<span>
<img src="http://lorempixel.com/40/50/nature/3" alt="ico"/>
</span>
</div>
|
Drawable shape with arrow in the middle of the shape border
By : user1735689
Date : March 29 2020, 07:55 AM
To fix this issue , Here is the solution of the image with drawabe code :
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color= "@color/themeColor"></solid>
<size android:width="150dp" android:height="100dp"/>
</shape>
</item>
<item>
<rotate android:fromDegrees="45" android:toDegrees="45"
android:pivotX="12%" android:pivotY="-140%" >
<shape android:shape="rectangle" >
<solid android:color="#ffffff" />
</shape>
</rotate>
</item>
</layer-list>
|
How to add different shape border?
By : Lavanya Murthy
Date : March 29 2020, 07:55 AM
hope this fix your issue Is it possible to echieve this kind of thing only using css? , Try this hope it will help: code :
// DATA -----------
var points = [
{"x" : 0 , "y" : 40},
{"x" : 30 , "y" : 40},
{"x" : 30 , "y" : 20},
{"x" : 60 , "y" : 20},
{"x" : 60 , "y" : -10},
{"x" : 30 , "y" : -10},
{"x" : 30 , "y" : 0},
{"x" : 0 , "y" : 0},
{"x" : 0 , "y" : 10},
{"x" : -30, "y" : 10},
{"x" : -30, "y" : 20},
{"x" : 0, "y" : 20},
];
//-----------
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(c.width / 2, c.height / 2);
ctx.scale(1,-1);
// DRAW THE GRID ----------
ctx.lineWidth = 1;
ctx.strokeStyle= "rgba(0,0,0,0.2)";
ctx.beginPath();
for (let i = 0; i < 200 ;i++) {
ctx.moveTo(i*10,-200);
ctx.lineTo(i*10,200);
ctx.moveTo(-i*10,-200);
ctx.lineTo(-i*10,200);
ctx.moveTo(200, i*10);
ctx.lineTo(-200, i*10);
ctx.moveTo(200, -i*10);
ctx.lineTo(-200, -i*10);
}
ctx.stroke();
ctx.closePath();
// DRAW THE SHAPE ----------
ctx.beginPath();
ctx.moveTo((points[0].x),(points[0].y));
for (let i = 1; i < points.length ;i++) {
ctx.lineTo((points[i].x), points[i].y);
}
ctx.closePath();
ctx.lineWidth = 2;
ctx.strokeStyle="blue";
ctx.stroke();
ctx.fillStyle="white";
ctx.fill()
.draw {
border:1px solid grey;
}
<div class="draw"><canvas id="myCanvas" width="200" height="200"></canvas></div>
|
» 
code :
Related Posts :
