shape an Image with border radius [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 26 days ago.
Improve this question
I want to shape an image like this with CSS and Tailwind but I got confused totally. Do you have any idea?

I think images are transparent and background shapes are generated by CSS (clip-path).
Like this:
.card{
width: 420px;
height: 310px;
margin: 30px;
border-radius: 5px 20px 20px 20px;
background: #00c853;
position: relative;
}
.card::before{
content: '';
position: absolute;
top: -18px;
width: 200px;
height: 50px;
background: #00c853;
border-radius: 20px 0 0 0;
clip-path: path('M 0 0 L 160 0 C 185 2, 175 16, 200 18 L 0 50 z');
}
<div class='card'></div>

Related

How to make a progress bar with image [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I'm going to make a progress bar.
When it's 0%, you can't see anything. From 1%, I would like to put a flag on the progress bar and let you know how far it has progressed. At 100 percent, this flag disappears. This flag is in image form and I don't know how to code it. Progress is received in JavaScript. Should I write position:relative, position:absolute in the div container?
.progressbar {
width: 100%;
border: 1px solid black;
border-radius: 5px;
height: 24px;
}
.icon {
width: 24px;
height: 24px;
position: absolute;
right: -12px;
opacity: .5;
}
.progress {
width: 50%;
background-color: green;
position: relative;
height: 24px;
}
<div class="progressbar">
<div class="progress">
<img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">
</div>
</div>
Here's the gist. Style as you please.

Javascript to show/hide div not working properly [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I am relatively new to javascript coding, been doing html\css only, so I wrote this function in JS, that hides and shows a div,but it doesn't seem to work at all, can you tell me what am I doing wrong?
Javascript:
<script type="text/javascript">
function click()
{
if (document.getElementById("div1").style.opacity == "1")
{
document.getElementById("div1").style.height="0px";
document.getElementById("div1").style.width="0%";
document.getElementById("div1").style.opacity="0";
}
else
{
document.getElementById("div1").style.height="400px";
document.getElementById("div1").style.width="60%";
document.getElementById("div1").style.opacity="1";
}
}
</script>
Below is the HTML code I'm working on:
<boutton onclick="click()">TEST CLICK</button>
<div id="div1">Random text in here...</div>
And also the STYLE tag:
<style>
#div1
{
background-color: rgba(0, 0, 0, 0.4);
color: #CBA303;
font-weight: bold;
text-align: center;
border-radius: 20px;
box-shadow: 10px 10px 15px gray;
height: 0px;
width: 0%;
padding: 10px;
font-size: 2em;
font-family: sans-serif;
z-index: 10;
position: absolute;
top: 20%;
left: 20%;
opacity: 0;
transition: height,width,opacity 1s ease;
}
</style>
Thanks for your help!
Rename your onclick function to something else besides click()
example here i've simply renamed it to toggle() and you can see it working.

Maximize Div without moving in DOM [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to maximize a div to whole windows width and height (or another parent div) without moving the element in the DOM. Is this even possible only with CSS?
<div id="parent1" class="fullwidth">
<div id="parent2" class="notfullwidth">
<div style="position:absolute">mycontent</div><!-- make this full width of parent1/overlay parent1 -->
</div>
</div>
Yes, it could be achieved by positioning the #parent1 relatively and expanding the absolutely positioned grand child by setting its top, right, bottom and left properties to 0.
#parent1 {
position: relative;
background-color: gold;
}
#parent2 {
width: 70%;
margin: 0 auto;
min-height: 100px;
border: 1px solid gray;
}
.grand-child {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background-color: rgba(255, 30, 0, .5);
}
<div id="parent1" class="fullwidth">
<div id="parent2" class="notfullwidth">
<div class="grand-child">mycontent</div><!-- make this full width of parent1/overlay parent1 -->
</div>
</div>
If the parent doesn't have a relative position, then the child can be expand to full width/height relative to window.
#mycontent {
background-color: green;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
}
if the parent1 has a relative position, the the child would expand to the parent max width & max height.
#parent1 {
position: relative;
width: 300px;
height: 300px;
}
#mycontent {
background-color: green;
position: absolute;
width: 100%;
top: 0;
left: 0;
height: 100%;
}

how to draw/get this in html? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have to get this feature in my web page,i.e.on the left trapezoid a google map will be there and on the right trapezoid another background will be there ,how to do that,
plz help
you can use an overlay with a linear-gradient as background : DEMO
Basic CSS:
#overlay {
position:absolute;
z-index:1;
top:0;
left:0;
bottom:0;
right:0;
background:linear-gradient(
to bottom right,
transparent 49.5%,
rgba(255,0,0,0.5) 50%
)
;
pointer-events:none;/* avoid click being catched*/
}
Just a little hint for you, which should help you getting what you want.
Try something like this:
#trapezoid {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
this is from the page
http://css-tricks.com/examples/ShapesOfCSS/
You can do something like this:
<div id="container">
<div id="triangle-topleft"></div>
</div>
and
#container {
height: 100px;
width: 100px;
overflow: hidden;
background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;
}
DEMO

bad display in Chrome [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have problem with position of element in Chrome.
Site: http://isedo.pl/projekty/gladness/
Navigation to slider with team running down. But when click on link in header and other link on site presses the element at a good place.
In Firefox is OK.
#edit
slider + navigate code: http://pastebin.com/ckPUeBaG
css:
#teamSlider{
margin: 20px 0 0 0;
float: left;
}
#snav{
float: right;
width: 35px;
height: 250px;
background: #818181;
margin: 20px 0 0 0;
}
#snavl{
background: url('../images/cnav_left.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
#snavr{
background: url('../images/cnav_right.png') no-repeat top left;
height: 48px;
width: 35px;
cursor: pointer;
}
.teamSlider is too big. It has a width of 3800px. This doesn't leave any room for .snav. I would make a container and then set the position of .snav absolutely.

Categories