Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How can you make shapes using a single HTML element? Any CSS technique can be used as long as it's supported in at least one browser.
Examples of shapes would be a round shape, a triangle, six-angled and so on.
http://css3shapes.com/ has instructions on how to make a lot of shapes in CSS.
But seriously, there are better solutions to drawing shapes in the browser than using CSS.
Most of the shapes shown in the site above only work in modern browsers because they use CSS3 techniques that aren't available in browsers like IE8. (So if you want to do this in old versions of IE, the answer is forget about it).
But the same browsers that support those shapes also all support other technologies like SVG, which allow you to draw any shapes you like, without the restrictions of working around a box shape.
So the short answer is yes, it can be done, but SVG will give you much better results.
I have made this fiddle with some pure html/css shapes:
- 2 triangles using a span border
- a circle with the help of border-radius
Disclaimer: I was inspired from the old google application/menu bar.
Source:
html
An CSS triangle pointing down:
<span class="delta_down"></span><br>
An CSS triangle pointing up:
<span class="delta_up"></span><br>
Circle:
<span class="circle"></span>
css
span.delta_down {
border-color: #C0C0C0 transparent transparent;
border-style: solid dashed dashed;
border-width: 5px 5px 0;
display: inline-block;
font-size: 0;
height: 0;
line-height: 0;
padding-top: 1px;
position: relative;
top: -1px;
width: 0;
}
span.delta_up {
border-color: transparent transparent #C0C0C0;
border-style: dashed dashed solid;
border-width: 0 5px 5px;
display: inline-block;
font-size: 0;
height: 0;
line-height: 0;
padding-top: 1px;
position: relative;
top: -1px;
width: 0;
}
span.circle {
border-radius: 50%;
width: 10px;
height: 10px;
display: inline-block;
background-color: #C0C0C0;
}
This is not possible with pure HTML and CSS. But you can use a canvas element and draw all shapes with JavaScript.
This basic tutorial may help you.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 months ago.
Improve this question
I was able to achieve the overall design but I am a bit worried about the way I code because I am aware that I am not using the best practice.
These are my codes:
#formatting {
text-align: center;
padding: 25px;
padding-top:10px;
padding-bottom:10px;
display:inline-block;
color:#ffffff;
}
.thindash {
background: #000000;
border: 2px dashed #ffffff;
position: relative;
}
.thindash:after {
content: '';
position: absolute;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
border: 1px solid #000000;
pointer-events: none;
}
</style>
<div style="background: #000000; padding: 15px; display: inline-block;">
<div class='thindash' id="formatting">
<h3>Working Hours</h3>
<p>Monday to Friday</p>
<p>8 AM - 12 PM (Lunch - Dinner)</p>
<p>8 AM - 11 AM (Morning Breakfast)</p>
</div>
</div>```
You are unlikely to get someone to clean your code. However I can provide a couple of tips regarding the code above.
Don't use inline styles on your outer <div>. Use a class instead.
Unless you have a specific reason to do so which is not obvious from the code above, do not use an id for styling #formatting. Either use the thindash class you already have or make formatting a class rather than an id.
You don't need to use padding, padding-top and padding-bottom on #formatting. padding is shorthand for padding-top padding-right padding-bottom padding-left. Presumably you want 25px padding on the left and the right and 10px bottom and top. As such you can just write padding: 10px 25px. That will give you 10px top and bottom and 25px left and right. More information on padding.
Don't get too frustrated; read articles and tutorials (there's tonnes of free resources online); and keep practising.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Hi everyone. I am new to HTML and CSS and I want to create something like the figure in the picture. The two rectangles are divs and I want the left div has a little triangle protruding onto the div on the right.
I would appreciate any help and suggestions.
/**** Edit ****/
Seems like what I am looking for is pseudo-elements! I do not want the triangle to interfere with the content of the right div.
My English is limited so I did not know how to phrase what I want in a Google search.
Thanks a lot for everything!!
You can use a pseudo element :after to add your triangle like this:
.arrow_box {
position: relative;
background: #888;
width: 300px;
height: 300px;
}
.arrow_box:after {
left: 100%;
top: 50%;
border: solid transparent;
content: "";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0,0,0,0);
border-left-color: #888;
border-width: 30px;
margin-top: -30px;
}
<div class="arrow_box"></div>
This question already has answers here:
Outline radius?
(24 answers)
Closed 7 years ago.
My code so far allows me to click on a button with rounded edges as I have applied the border-radius feature. However, when I click on the button the borer is still squared and so looks horribly out of sync.
Can be seen here:
http://www.tiikoni.com/tis/view/image.php?id=23d3264
this is the css for the button:
.submitToDoButton {
background: lightgray;
font-size: 20px;
color: red;
padding: 2px;
width: 100px;
border-radius: 25px;
}
this is what I thought would be the code to change the border aka set it to the same radius:
.submitToDoButton:active{
border-radius: 25px;
}
but this does nothing
You could try outline: none; to the main button class:
.submitToDoButton{
border-radius: 25px;
outline: none; /* add this */
}
If you do want an effect similar to outline but to look good, you can use the box-shadow property.
You won't be able to solve this with border-radius and outline. To get the result you are looking for you need to make a box-shadow looking the same as the outline on :focus.
.submitToDobutton:focus {
box-shadow: 0 0 5px blue;
}
I am not sure about the outline color, but you'll probably have to change 'blue' to the correct color.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm still newbie in html. How can I achieve this with style:
rounded border 1px color grey
icon on the left with peach background
input text on the right
The only way to achieve that as Crossbrowser solution is to use background-image with background-position and background-size
input[type=text]{
background-image: url(http://i.imgur.com/EitD5gR.png);
background-size: 16px 16px;
background-repeat: no-repeat;
background-position: left top;
border-radius: 6px;/*rounded border */
border: 1px solid grey;
padding-left: 16px
}
<input type=text />
in a near future you will be able to do that using :pseudo-element
Its better If you can provide some code but since you are a beginner hope this code helps you
<div id = 'outer'>
<div id = 'inner'>
img
</div>
</div>
CSS
#outer{
width:200px;
height:50px;
border: 2px solid gray;
position:absolute;
border-radius:10px;
}
#inner{
position:relative;
width: 20%;
height:100%;
background-color: yellow;
border-radius:2px;
z-index:-30;
}
Cick for fiddle Fiddle
Here's the basic idea:
The rounded border you'll get with the CSS property border-radius. You'll need to look this up, because not all browsers respect plain ol' border-radius - you'll end up with several css rules (e.g. border-radius:...; -webkit-border-radius:...). The border color you'll get with the css property border-color. http://www.w3schools.com/cssref/pr_border.asp (and the links in the left sidebar) is a good resource to learn about styling borders
The image inside the input is going to be kinda complicated for a newbie. There are a couple ways you could do this… I recommend using a :before "pseudoelement." You'll set the <input> (or whatever the main element you're styling here is) to let elements inside it position themselves relative to it, and then you'll set the pseudoelement to be absolutely positioned all the way on the left. The pseudoelement then gets a specific size, and you put an image into it.
Without doing too much of the work for you, the CSS will be something like
input {
border-radius: ...;
border-color: ...;
position: relative; <-- lets us position child elements relative to this one
}
input:before {
content: url(path/to/the/image);
position: absolute;
left: 0;
width: 30px; <-- I'm just guestimating that number
height: 100%; <--- depending on the rest of your css, this might need to be set in pixels
}
Other problems you might run into:
You might lose the rounded corners on the left. If so, you can round only those corners on the input:before (a tool like http://border-radius.com/ will help you round only certain corners)
If you're using an <input>, it might look wrong in some browsers. That's because browsers supply default styles for inputs. This gets into fancier stuff, so I'll give you the solution up front and you can study up to figure out what it does
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
border-repeat: repeat;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
On this site, http://kickpoint.ca/, there is a little red triangle underneath the main red section at the top
I cant for the life of me work out how it is done. I've used Chrome dev tools and cant see where it is defined.
Anyone know how it is achieved or if there is a standard way of achieving this effect?
CSS Triangles.
CSS
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
HTML
<div class="arrow-down"></div>
Resource
More info can be found here
Here's a link from CSS tricks on how to do it: http://css-tricks.com/speech-bubble-arrows-that-inherit-parent-color/
Google is your friend ;)
It uses CSS to make triangles. The basic concept of creating a triangle is to set the border of div on one side to form the base. The adjacent border is left blank and the borders perpendicular to the base are set to transparent. A good explanation of CSS triangles can be found here: http://css-tricks.com/snippets/css/css-triangle/
HTML
<div class="pointer">
<div class="inner"></div>
<div class="arrow"></div>
</div>
CSS
.pointer{
width: 100px;
}
.pointer .inner {
height: 25px;
background: red;
}
.pointer .arrow{
border-top: 10px solid red;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
width: 0px;
margin: 0px auto;
}
Working Example: http://jsfiddle.net/JYM8w/