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 want to create a button looking like this:
Is there a way to create this button using only CSS, without using the attached as a background image. I tried playing around with border-radius but was unable to achieve this.
Closest I can get you is this.... for a width of 410px and height of 294px..the actual image is by far larger than this snippet's window...good luck
div{
width:410px;
height:294px;
background:#ed1e79;
border-radius:45%;
}
<div></div>
Yes, it is possible.
Here's how you do it :
.pinkbutton {
border-radius: 240px / 120px;
background-color: #ed1e79;
width : 175.2px;
height : 126.6px;
}
<div class="pinkbutton"></div>
.ellipseDiv {
height: 50px;
width: 100px;
border: 2px solid #005;
border-radius: 50px / 25px;
background-color: #EE5D20;
}
<div class="ellipseDiv"></div>
That should get you what you want.
This example is made with a div, but can be just as easily done with a button!
You have to play with the property border-radius, so for example it will be
#your-button {
background-color: some-color;
border-radius: some-percentage;
}
Look at this
Related
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 last year.
Improve this question
I have two divs placed up and down as mentioned in the image. I want to draw a vertical connecting line between these two divs. I used pipe (|) font to do this. But, it is not looking elegant. Can someone help me to draw an elegant vertical line between the divs?
Use border-left:4px dashed blue; property to create a dashed line for connecting the two divs.
.box {
width:80%;
margin-left:10%;
height:70px;
background: grey;
}
.vl {
border-left: 4px dashed blue;
height: 40px;
margin-left:50%
}
<div class="box"></div>
<div class="vl"></div>
<div class="box"></div>
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 2 years ago.
Improve this question
I'm trying to create a Triangle on top of a rectangle div. The triangle needs to be the width of the page and also be responsive. The upper right and left parts of the div (where no triangle exists) needs to be transparent.
I have an image of what it should look like but it's very difficult to see due to the similar dark colors. The upper right and left of the rectangle div needs to be transparent.
Does anyone know how I can recreate the highlighted rectangle in the image below?
I've been trying for hours by searching through stackoverflow and haven't been able to figure it out from other questions.
Thank you!
You can try that :
<html>
<body>
<style>
body {
margin: 0;
}
.rectangle {
width: 100%;
height: 100px;
background: #777;
}
.triangle-up {
width: 0;
height: 0;
border-left: 50vw solid transparent;
border-right: 50vw solid transparent;
border-bottom: 100px solid black;
}
</style>
<div class='rectangle'>
<div class='triangle-up'></div>
</div>
</body>
</html>
(I changed the colors to make it easier to see)
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 4 years ago.
Improve this question
I'm trying to make a website based similar to this design I found on Dribbble. I decided to incorporate the curved background, however I'm not sure how to implement this. I've tried to make a div with the full background with background-color: #04060F but I'm not entirely sure of how to do this nor get it to fill until a specific padding and border radius.
EDIT: I'm getting this result
Any help would be appreciated
Thanks
Do you mean :
div{
border-radius: 5px;//or any length
}
this will give you the rounded corners you're looking for.
Source
Here is a very simple example :
div{
height: 100px;
background-color: blue;
color: white;
border-radius:5px;
}
<div class="rounded">
Some text
</div>
This is the main skeleton I was thinking of looking at the pic you posted.
.main {
background-color: red;
}
.badge{
background-color: #efefef;
border-radius: 20px;
padding: 10px;
}
<body class="main">
<div class="badge">
lorem<br>
ipsum<br>
dolor<br>
sit<br>
amen<br>
</div>
</body>
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 have a logo that I need to insert into an html page, that logo is in a square size but I need it to become a circle, how can I do that using CSS?
.logo {
background: url('path/to/image.jpg');
height: 100px;
width: 100px;
border-radius: 100px;
}
This should do the job. Set the background url to the one of the logo and height and width accordingly.
Use border-radius. A simple example you can see here:
img.logo {
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
<img class="logo" src="http://placehold.it/100x100"/>
Use border-radius then set overflow to hidden.
use border and make
border-radius:50%;
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 8 years ago.
Improve this question
I have link that I want a border around but I can't get the border to appear closer to the text. Below is the css for the element;
.signup{
border: 1px solid;
border-radius: 10px;}
which displays the border as;
If I add height: 1.2em it reduces the bottom spacing but not the top;
how do I reduce the spacing above the text?
I'm using the bootstrap flatly theme http://bootswatch.com/flatly/ the element I want the border around is 'WrapBootstrap' in the top right of the navigation bar.
You should give the border style to the <span> itself.
span{
border: 1px solid black;
border-radius: 10px;
padding: 5px 10px;
}
Editing the padding will allow you to move the border from the text.
In your case the position of the <span> and the .margin might be causing the discrepancy. Like #dfsq pointed out, there could be other factors.