I want to outline (2px high) ONLY the top, shaped part of this polygon with the color blue. What is the most effective way to achieve this?
.graph {
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border:none;
height:200px;
width:100%;
background:red;
position:absolute;
bottom: 0;
}
<body>
<div class="graph"></div>
</body>
This might not be the best solution but worth a try.
.graph {
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border:none;
height:200px;
width:100%;
background:red;
position:absolute;
bottom: 0;
}
.graph::before {
content: "";
clip-path:polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%, 100% 100%,0 100%);
border: none;
height: 200px;
width: 100%;
background: white;
position: absolute;
bottom: -5px;
}
body{
overflow-y:hidden;
}
<body>
<div class="graph"></div>
</body>
Add more points to create only the line. You can introduce a variable to control the thickness:
.graph {
--b: 5px; /* the thickness */
height: 200px;
bottom:0;
left:0;
right:0;
position: absolute;
background :red;
clip-path: polygon(0 78%, 9% 67%, 32% 77%, 56% 60%, 69% 30%, 88% 40%, 100% 20%,100% calc(20% + var(--b)),88% calc(40% + var(--b)),69% calc(30% + var(--b)),56% calc(60% + var(--b)),32% calc(77% + var(--b)),9% calc(67% + var(--b)),0 calc(78% + var(--b)))
}
body {
background: grey;
}
<div class="graph"></div>
Related
I want a shadow around and iside the hole of a cut donut polygon .
Hello,
I am trying to do a button in form of a cut donut but I am having trouble putting borders to it without making another polygon inside, so I tried to put shadows but only inset box-shadow was working and that wasn't what I wanted.
Here is the code :
body>
<div class="container">
<div class="polygon"></div>
</div>
</body>
and css :
:root{
--color1 : #86a59c;
--color2 : #284141;
--lightShadow : #ffffff55;
--darkShadow : #0000001E;
--polygon : polygon( 0% 50%, 1.01020514433644% 40%, 4.1742430504416% 30%, 10% 20%, 15% 18%, 20% 20%, 30% 30%, 30.5% 32.5%, 30% 35%, 27.0871215252208% 40%, 25% 50%, 27.0871215252208% 60%, 30% 65%, 35% 70%, 40% 72.9128784747792%, 50% 75%, 60% 72.9128784747792%, 65% 70%, 70% 65%, 72.9128784747792% 60%, 75% 50%, 72.9128784747792% 40%, 70% 35%, 69.5% 32.5%, 70% 30%, 80% 20%, 85% 18%, 90% 20%, 95.8257569495584% 30%, 98.9897948556636% 40%, 100% 50%, 98.9897948556636% 60%, 95.8257569495584% 70%, 90% 80%, 80% 90%, 70% 95.8257569495584%, 60% 98.9897948556636%, 50% 100%, 40% 98.9897948556636%, 30% 95.8257569495584%, 20% 90%, 10% 80%, 4.1742430504416% 70%, 1.01020514433644% 60%);}
body {
padding: 0;
margin: 0;
background-color: #888888;
font-size: 0.3em;
}
.container {
height: 20em;
width: 20em;
background: var(--color1);
position: absolute;
filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.5));
}
.polygon {
content: "";
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 80%;
width: 80%;
background-color: var(--color2);
clip-path: var(--polygon);
}
What do you think? The main problem is chadow around and inside the hole of the donut.
I'd like to create a scotch tape band design on my website. I would like it to look almost like that :
I designed yet the clean tape but I cannot manage to create the bendings (circled on the picture) properly.
this is what I have yet.
body {
overflow: hidden;
}
.duct-tape {
display: flex;
justify-content: space-around;
align-items: space-around;
transform-origin: center;
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
background-color: yellow;
overflow: hidden;
}
.duct-tape:nth-of-type(1) {
transform: translate(-50%, -50%) rotateZ(-20deg);
}
.duct-tape:nth-of-type(2) {
transform: translate(-50%, -50%) rotateZ(30deg);
}
.duct-tape > .shadow {
display: block;
position: absolute;
height: .3px;
width: 50px;
transform: rotateZ(-30deg) translateX(13px);
border-radius: 100%;
box-shadow: .1em .1em .25em rgb(130, 130, 0);
}
/* debug code */
.circle {
content: "";
display: block;
border-radius: 100px;
width: 30px;
height: 30px;
border: 2px solid lightblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-60%, -60%);
}
<body>
<div class="duct-tape">
<span>any text</span>
<span>any text</span>
</div>
<div class="duct-tape">
<span>any text</span>
<span>any text</span>
<span class="shadow"></span>
</div>
<!-- debug code -->
<span class="circle"></span>
</body>
Yet I thought about create little shadow elements (class shadow in duct-tape in the snippet) that would act like the bendings. I thought about svg too, but it doesn't seem I can easily create such an svg. I know css packs up 3D transforms, could it help me or this is too specific to be properly done using css 3D transforms ? Any idea of easier ways to do it ?
You may take a look at clip-path, rgba() colors and gradient.
here is a quick example to show the idea.
body {
background: yellow;
}
span {
--rt: 45deg;
position: absolute;
height: var(--ht, 400px);
width: var(--wdt, 50px);
background: linear-gradient(30deg, transparent 30%, rgba(255, 255, 255, 0.3) 32%, transparent 33%), radial-gradient(circle at 60% 40%, transparent 15px, rgba(255, 255, 255, 0.25) 17%, transparent 20%) rgba(0, 0, 0, 0.075);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.6);
top: 50%;
left: 50%;
margin: -200px -25px;
transform: rotate(var(--rt));
clip-path: polygon(1% 0%, 19% 1%, 30% 0%, 38% 0%, 48% 1%, 58% 3%, 62% 3%, 79% 3%, 73% 1%, 84% 0%, 87% 0%, 91% 4%, 92% 2%, 99% 0%, 96% 5%, 96% 20%, 100% 34%, 100% 46%, 99% 54%, 95% 57%, 87% 69%, 100% 77%, 100% 82%, 100% 89%, 100% 96%, 90% 99%, 76% 100%, 71% 97%, 63% 100%, 54% 99%, 51% 100%, 37% 98%, 34% 100%, 21% 99%, 17% 100%, 14% 98%, 10% 100%, 3% 98%, 3% 100%, 0% 85%, 4% 80%, 0% 74%, 4% 55%, 6% 45%, 3% 40%, 0% 34%, 6% 25%, 4% 16%, 1% 13%);
}
span:nth-child(2) {
--rt: -45deg;
--ht: 450px;
background-size: 150% 200%;
clip-path: polygon(0 0, 13% 2%, 22% 0%, 28% 0%, 34% 2%, 46% 2%, 60% 2%, 69% 3%, 79% 1%, 80% 0%, 90% 0%, 93% 3%, 100% 4%, 99% 98%, 97% 100%, 87% 99%, 80% 100%, 74% 99%, 68% 100%, 60% 99%, 50% 100%, 43% 97%, 33% 96%, 31% 98%, 24% 99%, 20% 100%, 14% 98%, 9% 100%, 0% 100%);
}
span:nth-child(3) {
--rt: -45deg;
--wdt: 40px;
--ht: 200px;
left: 25%;
background-size: 110% 200%;
}
span:nth-child(4) {
--rt:15deg;
--wdt: 40px;
--ht: 150px;
left: 25%;
background-size: 40% 50%;
clip-path: polygon(0 0, 13% 2%, 22% 0%, 28% 0%, 34% 2%, 46% 2%, 60% 2%, 69% 3%, 79% 1%, 80% 0%, 90% 0%, 93% 3%, 100% 4%, 99% 98%, 97% 100%, 87% 99%, 80% 100%, 74% 99%, 68% 100%, 60% 99%, 50% 100%, 43% 97%, 33% 96%, 31% 98%, 24% 99%, 20% 100%, 14% 98%, 9% 100%, 0% 100%);
}
<span></span>
<span></span>
<span></span>
<span></span>
gradient linear,radial and conic can be used via background and resized and repeated or not, clip-path can allow you to cut off some pieces . a usefull tool to help you https://bennettfeely.com/clippy/
mask svg is also a possibility instead clip-path or mixed with.
The code is below.
gradient
there is a very small gap between two divs.but it should not have.
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
<div class='gra left'></div>
<div class='gra right'></div>
It's happening because of Antialiasing.
Use left:0; with the left class and left: -1px; with the right class to overlap Antialiasing
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
left:0;
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
left: -1px;
}
<div class='gra left'></div>
<div class='gra right'></div>
You can change by:
clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%) ;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.right {
background: linear-gradient(270deg, red 0%, blue 101%);
clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
}
<div class='gra left'></div>
<div class='gra right'></div>
Or, another way:
.gra {
position: relative;
width: 200px;
height: 200px;
overflow:hidden;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
position:absolute;
bottom:0;
left:0;
width:201px;
height:201px;
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
position:absolute;
top:0;
right:0;
width:201px;
height:201px;
}
<div class="gra">
<div class="left"></div>
<div class="right"></div>
</div>
Here is an idea without clip-path where you will have a better support, less of code and no gap issue
.container {
background: linear-gradient(to left, red 0%, blue 100%);
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.container:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, blue 100%);
transform-origin: bottom right;
transform: skewX(45deg);
}
<div class="container">
</div>
You can fix this by adding a half pixel to the 100% values.
Change:
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
To:
clip-path: polygon(0% 0%, 0% calc(100% + 0.5px), 100% calc(100% + 0.5px));
If you need to fix a gap on the top, you could change 0% to calc(0% - 0.5px).
I am trying to make my div have this form:
I only get this result with the code I am using:
div {
background: lightblue;
height: 34rem;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
}
<div></div>
Thanks for you help guys!
If it's only about coloration you don't need to use clip-path. You can easily achieve this with multiple background and have a better support:
div.box {
height: 300px;
background:
linear-gradient(blue,blue) top/100% 70%,
linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,
linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;
background-repeat:no-repeat;
margin-bottom:20px;
}
<div class="box">
</div>
In case you need the black border you can adjust like below:
div.box {
height: 300px;
background:
linear-gradient(blue,blue) top/100% 70%,
linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,
linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left -20px/calc(50% + 21px) 30%;
background-repeat:no-repeat;
margin-bottom:20px;
}
<div class="box">
</div>
div {
background: lightblue;
height: 34rem;
-webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
<div></div>
This link is helpful https://bennettfeely.com/clippy/
How to make the p:tab in p:wizard looks like a arrow ,
something like the attached picture
Thank you in advance.
You can do this via CSS:
.firstTab{
line-height: 43px;
text-align:center;
height:60px;
width:210px;
-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.middleTab{
line-height: 43px;
text-align:center;
margin-left: -30px !important;
height:60px;
width:210px;
-webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}
.lastTab{
line-height: 43px;
text-align:center;
margin-left: -85px !important;
height:60px;
width:220px;
-webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 55% 50%);
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 50% 50%);
}
And in your xhtml file:
<p:tabView activeIndex="#{declarationMBean.activeIndex}" style="align-content: center; background: #67a3cf;" >
<p:ajax event="tabChange" listener="#{declarationMBean.onTabChange}" />
<p:tab id="tab_0" title="Example" titleStyleClass="firstTab" >
.
.
.
<p:tab id="tab_2" titleStyleClass="middleTab">
.
.
<p:tab id="tab_3" titleStyleClass="middleTab">
.
.
<p:tab id="tab_4" titleStyleClass="lastTab">