Best Elliptical Fit for irregular shapes in an image
Tag : image , By : abuiles
Date : March 29 2020, 07:55 AM
wish help you to fix your issue Principal Component Analysis (PCA) is one way to go. See Wikipedia here. The centroid is easy enough to find if your shapes are convex - just a weighted average of intensities over the xy positions - and PCA will give you the major and minor axes, hence the orientation.
|
Irregular shapes as links
Tag : html , By : OlioEngr
Date : March 29 2020, 07:55 AM
To fix the issue you can do You could use a rotated pseudo element to split the circle into 3 sectors, then rotate the first and last child to 'fill' the circle: .wrap {
position: relative;
height: 200px;
width: 200px;
}
.section {
height: 50%;
width: 50%;
background: tomato;
border-radius: 0 0 100% 0;
position: absolute;
top: 55%;
left: 55%;
display: inline-block;
cursor: pointer;
text-align: right;
}
.section:before {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 100%;
border-radius: inherit;
background: inherit;
left: 0;
transform: rotate(30deg);
transform-origin: -5% -5%;
}
.section:nth-of-type(1) {
transform: rotate(150deg);
transform-origin: -5% -5%;
}
.section:nth-of-type(2) {
transform: rotate(30deg);
transform-origin: -5% -5%;
}
.section:nth-of-type(3) {
transform: rotate(270deg);
transform-origin: -5% -5%;
}
.section:hover {
background: cornflowerblue;
}
.middle {
position: absolute;
height: 50px;
width: 50px;
border-radius: 50%;
background: gray;
top: 50%;
left: 50%;
transform: translate(-45%, -45%);
border:10px solid white;
}
<div class="wrap">
<div class="section">section 1</div>
<div class="section">section 2</div>
<div class="section">section 3</div>
<div class="middle"></div>
</div>
|
css div containers with irregular shapes
Tag : css , By : onurtopcu
Date : March 29 2020, 07:55 AM
this one helps. Since all the answers use 2 elements, let's post another with a single element. Uses padding to keep the text inside the trapezoid, and 2 gradients to create the background in trapezoid shape div {
width: 300px;
padding: 0px 50px;
background-image: linear-gradient(80deg, transparent 40px, lightblue 40px), linear-gradient(-80deg, transparent 40px, lightblue 40px);
background-size: 51% 100%;
background-position: left bottom, right bottom;
background-repeat: no-repeat;
}
<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
div {
width: 400px;
margin: 50px;
position: relative;
}
div:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: lightblue;
border: solid 2px blue;
z-index: -1;
transform: perspective(200px) rotateX(-10deg);
transform-origin: center bottom;
border-radius: 10px;
box-shadow: 10px 10px 10px gray;
}
<div>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
|
Pattern of irregular clickable shapes
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further To make a pattern of irregular clickable polygons, you can use inline SVG with: the SVG link element the polygon element to make the shapes svg {
display:block;
width:40%; height:auto;
margin:0 auto;
}
polygon {
fill:#ccc;
stroke:#fff; stroke-width:0.3;
transition: fill .15s;
}
a:hover .teal { fill:teal; }
a:hover .pink { fill:pink; }
a:focus .teal,
a:focus .pink { fill:orange; }
<svg viewbox="0 0 20 19">
<a xlink:href="#"><polygon class="teal" points="0 0 10 5 8 10 0 5" /></a>
<a xlink:href="#"><polygon class="pink" points="0 0 10 5 15 0" /></a>
<a xlink:href="#"><polygon class="teal" points="0 5 8 10 0 15" /></a>
<a xlink:href="#"><polygon class="teal" points="15 0 10 5 20 19" /></a>
<a xlink:href="#"><polygon class="pink" points="20 19 10 5 8 10" /></a>
<a xlink:href="#"><polygon class="teal" points="20 19 8 10 0 15 8 13" /></a>
<a xlink:href="#"><polygon class="pink" points="20 19 0 19 0 15 8 13" /></a>
<a xlink:href="#"><polygon class="pink" points="15 0 20 19 20 20 20 0" /></a>
<a xlink:href="#"><polygon class="teal" points="20 17 18 16 16 17 17 20 20 20" /></a>
</svg>
|
Irregular shapes in Delphi
Tag : delphi , By : John Phipps
Date : March 29 2020, 07:55 AM
This might help you Using a TPath component with the following path data should give you a result that's very similar to what you want: M0,0 L100,0 C110,-5 110,-15 120,-20 L200,-20 C210,-15 210,-5 220,0 L320,0 L320,5 L0,5 Z
|
Boards Message :
Related QUESTIONS :
