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 years ago.
Improve this question
I know the title wasn't the best way to describe it. But I am trying to recreate the symbols shown in the image on both sides of the word interval. I have no idea how to do this. Is it a symbol? Or some kind of graphic using svg?
Here is my solution,
You can use border-width to create that shape
To create the first L shape, make top and left border-width 2px.
Similarly for 2nd L shape make border-width of top and right 2px;
span:after,span:before{
content: "";
width: 41px;
height: 6px;
display: inline-block;
margin:3px;
vertical-align: bottom;
border:1px solid grey;
}
span:after{
border-width:2px 2px 0 0; /*top right bottom left*/
}
span:before{
border-width:2px 0 0 2px;
}
<span>Interval</span>
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 2 years ago.
Improve this question
I want to create a partial border around these different font headings. How can i create these, please help. I have tried everything but nothing is working. Sorry, noob here
You can't do that with border-top: 10px but you can use pseudo elements like that:
div{
width: 150px;
height: 100px;
background-color: lightgrey;
border-bottom: 5px solid grey;
border-right: 5px solid grey;
}
div:before{
content: '';
width: 70px;
height: 5px;
background-color: grey;
position: absolute;
left: 90px;
}
<div></div>
To be more specific, add :after or :before on your div and add what I added on my example and you can change the height/width/color and make sure to add position:absolute and add some specific properties like top, left..., to position that line where you want.
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>
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
I am currently designing an android phonegap application and i need help trying to recreate the triangles with a Box-shadow of some sort but the box shadow will only show as a square and not a triangle. When i tried searching for an answer, i could only find one for equilateral triangles or only on two sides, not the longest side.
The Design (Hidden some parts):
https://i.stack.imgur.com/ysopX.png
Edit:
Pastebin Link for current prototype (Currently not responsive - designed for 1080px by 1920px):
pastebin.com/GmYh9d9F
What you need is the drop-shadow filter:
.test {
width: 0;
height: 0;
border-style: solid;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #007bff transparent;
filter: drop-shadow(0 0 4px #555);
}
<div class="test"></div>
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 5 years ago.
Improve this question
I am trying to make this todolist on my own https://www.w3schools.com/howto/howto_js_todolist.asp
But this piece of css code:
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
adds a check before the list, how does it put the check mark before the list?
The "check" is just the border of an empty box given a specific size, then rotated. The ::before pseudo element goes at the beginning of the content, the width and height form a rectangle, the border puts lines on two of the four edges, then the transform rotates it so the border looks like a check. Kinda a roundabout way of doing it. They could have also just used `content: 'some checkbox char'``.
If you change the border-width or transform things, you'll see what I mean.
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
how to put arrow sign on submit button without an image..
arrow next to your text, will be
TEXT →
and will look like:
TEXT →
From looking at:
http://dev.w3.org/html5/html-author/charref a complete list of symbols you can create from HTML entities (symbols made from HTML special characters).
By using Pseudo element
button{position: relative; margin: 40px}
button:before{
content: '';
position: absolute;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 10px solid red;
border-bottom: 10px solid transparent;
right: -20px;
top: -1px;
}
<button>ENTER</button>
Or use Character Entity Reference Chart
<button>ENTER ▸ </button>