I am trying to make an arrow overlap onto the div below it (the way the gray arrow overlaps onto the red on http://tinyletter.com).
Here is the code I am currently using:
#box_1 {
height: 550px;
width: 100%;
font-size: 4.5em;
font-weight: 600;
float: center;
text-align: center;
background-color: #ededed;
padding: 55px 0 0 0;
}
.arrow-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid #ededed;
margin-left:auto;
margin-right:auto;
}
#box_2 {
height: 600px;
width: 100%;
font-size: 7em;
float: center;
text-align: center;
background-color: #ed2227;
}
If you're able to rely upon use of the ::after (or ::before) pseudo-elements, then this is relatively easy simply using borders:
#top {
position: relative;
background-color: #ccc;
}
#top::after {
position: absolute;
content: '';
top: 100%;
left: 50%;
margin: 0 0 0 -1em;
border: 1em solid transparent;
border-top: 1em solid #ccc;
}
JS Fiddle demo.
Related
My paper-input is extending outside of the parent div, and I don't know why. I've tried setting the bottom margin but it does nothing. Here's what I have, the borders are for testing and will be removed later.
#main {
width: 100%;
height: 100%;
border: 2px solid transparent;
}
.sliderContainer {
width: 100%;
height: 60px;
border: 2px solid transparent;
}
.label {
width: 100%;
margin-left: 6px;
}
.labelValue {
margin-left: 10px;
color: #A6A6A6;
}
.sliderDiv {
width: 100%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.button {
width: 1px;
height: 30px;
float: left;
display: inline-block;
border: 2px solid transparent;
}
.slider {
width: 50%;
height: 30px;
margin-top: 3px;
margin-right: 34px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffset { /* This is the issue. */
width: 16%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffsetDiv {
width: 5%;
display: inline-block;
}
example
Figured it out, it was the label that was causing an issue. I added no-label-float to remove the floating label and vertical-align: top to the class and that made it work.
I want to make a div that a 2px solid white border on the bottom, left, right, and most of the top except for a small part roughly 50px wide that will have a 1px solid green border. I know php if you think that will help. My current css is this...
div#ghostBox{
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
left: 550px;
top: 270px;
}
Btw I am making a game of pac-man.
You can keep the use of only one element and rely on gradient:
body {
background: pink;
}
.box {
width: 170px;
height: 100px;
border: 5px solid white;
border-top: none;
background: linear-gradient(to right, white 50px, green 0) 0 0/100% 5px no-repeat;
}
<div class="box">
</div
i think you want this (:
body{
background-color:black;
}
p{
color:white;
margin: 1px;
}
/* TEXT BOX */
div#ghostBox{
height: 100px;
width: 150px;
border: 2px solid white;
border-top: 5px solid white;
position: fixed;
left: 50px;
top: 50px;
color:red;
padding: 0px;
padding-top: 0px;
}
/* High text color line */
div#text{
border-top: 5px solid green;
position: absolute;
margin-top: 0px;
width: auto;
margin: 0px;
}
/* High color line after text */
div#notext{
border-top: 5px solid red;
margin-top: 0px;
width: auto;
margin: 0px;
}
<div id="ghostBox"><div id="text"><p>good luck
</p></div><div id="notext"></div></div>
You can do it using css after or before pseudo selector. Below is just an example . You can modify it according to your requirement
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
background: red;
}
div#ghostBox:after {
content: '';
width: 50px;
border: 2px solid green;
position: absolute;
padding-right: 50px;
}
<div id="ghostBox"> Ghost Box</div>
There may be better ways, but you could use a span at the beginning of the div:
Just set the border-top for the span and set its width:
(I removed the left and top properties for the example)
body {
background-color: red;
}
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
}
span {
border-top: 2px solid blue;
width: 50px;
position: absolute;
}
<div id='ghostBox'>
<span> </span> test
</div>
This question already has answers here:
How do CSS triangles work?
(23 answers)
Closed 7 years ago.
I'm Trying to create a banner with a triangular shape at the end.
.wrapper {
padding: 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 20px solid gray;
border-bottom: 20px solid gray;
border-right: none;
}
<div class="wrapper">TEXT HERE</div>
Just helping you out with this as you've tried but it didn't worked as you expected... So basic idea is that we can use CSS pseudo elements to create that effect..
.wrapper {
background: #C3C3C3;
padding: 20px;
font-size: 40px;
font-family: Arial;
text-align: center;
position: relative;
}
.wrapper:after {
content: "";
width: 0;
height: 0;
border-top: 42px solid transparent;
border-bottom: 42px solid transparent;
border-right: 40px solid white;
position: absolute;
right: 0;
top: 0;
}
<div class="wrapper">TEXT HERE</div>
Here, am doing nothing fancy, we are using a pseudo element i.e nothing but a virtual element which doesn't exist in the DOM but we can insert it using CSS and positioning that pseudo element to the right side of your wrapper. This will help you get the ribbon like end. Note that the color of the triangle is hard coded and it's not transparent.
here is the fiddle. https://jsfiddle.net/nileshmahaja/s5egaebr/
I have used :after selector to the wrapper div.
CSS
.wrapper {
padding: 0 50px;
font-size: 0px;
line-height: 0%;
width: 0px;
height:120px;
background:#ddd;
position:relative;
width:500px;
}
.wrapper:after {
content:'';
width: 0px;
height: 0px;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-right: 60px solid #fff;
position:absolute;
right:0
}
Try this it works
.wrapper {
font-family: arial;
font-size: 12px;
color: white;
background-color: black;
border: 1px solid white;
padding: 8px;
width: 100px;
text-align: center;
position: relative;
}
.wrapper:after {
content: '';
position: absolute;
border-top: 16px solid transparent;
border-bottom: 16px solid transparent;
border-right: 16px solid white;
z-index: 10;
top: 0px;
right: 0px;
}
<div class="wrapper">TEXT HERE</div>
This question already has answers here:
Aligning css arrow boxes
(6 answers)
Closed 8 years ago.
Hello i would like to style the borders of my list element so that the border-top-right and the border-bottom-right meet in a triangular shape with only css.
like so:
or like so:
I want to achieve both of these two shapes using css alone, to maybe alter the borders to that shape, i would like to know if that is possible and how i can go about it. The element in question is a list element.
If you're after that specific shape, you can use the :before and :after pseudo elements
Demo Fiddle (second shape)
HTML
<div></div>
CSS
div {
display:inline-block;
position:relative;
height:30px;
width:50px;
background:Red;
}
div:before, div:after {
content:'';
position:absolute;
display:inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
}
div:after {
border-color: transparent transparent transparent red;
right:-26px;
}
div:before {
border-color: transparent transparent transparent white;
}
code for your shapes:-
#breadcrumbs-two{
overflow: hidden;
width: 100%;
}
#breadcrumbs-two li{
float: left;
margin: 0 .5em 0 1em;
}
#breadcrumbs-two a{
background: #ddd;
padding: .7em 1em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
position: relative;
}
#breadcrumbs-two a:hover{
background: #99db76;
}
#breadcrumbs-two a::before{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: #ddd #ddd #ddd transparent;
left: -1em;
}
#breadcrumbs-two a:hover::before{
border-color: #99db76 #99db76 #99db76 transparent;
}
#breadcrumbs-two a::after{
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;
}
#breadcrumbs-two a:hover::after{
border-left-color: #99db76;
}
#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
font-weight: bold;
background: none;
}
#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
content: normal;
}
DEMO
div {
background: #EF3E36;
margin: 10px;
}
.arrow1 {
position: relative;
left: 50px;
width: 250px; height: 100px;
}
.arrow1:before {
display: block;
content: "";
width: 0;
height: 0;
position: absolute;
left: -50px;
border: 50px solid #EF3E36;
border-left: 50px solid transparent;
border-right: 0;
}
.arrow1:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 250px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
.arrow2 {
position: relative;
width: 300px; height: 100px;
}
.arrow2:after {
display: block;
content: "";
background: transparent;
width: 0;
height: 0;
position: absolute;
left: 300px;
border: 50px solid transparent;
border-left: 50px solid #EF3E36;
}
I am trying to find a better way to create an upper right triangle with a check-sign on it with CSS:
So far, I produce the triangle with three CSS-Elements:
.arrow_down {
width: 0;
height: 0;
border-left: 200px solid transparent;
border-right: 200px solid transparent;
border-top: 200px solid #f00;
}
.arrow_left {
margin-top: -200px;
margin-left: 200px;
width: 0;
height: 0;
border-top: 200px solid transparent;
border-bottom: 200px solid transparent;
border-right:200px solid blue;
}
.arrow_text {
font-size: 180px;
color: white;
margin-top: -200px;
margin-left: 0px;
}
And i embedd the triangle accordingly like this:
<div id="triangle"><div class="arrow_down"></div><div class="arrow_left"><div class=arrow_text>✔</div></div></div>
I can't switch to an image because I need to be able to change the colors flexibly. Is there a better ( = simpler ) way to create and embedd such a triangle with the check-sign?
Just another one div variation (see fiddle):
.arrow {
width: 400px;
height: 400px;
letter-spacing: 20px;
font: bold 200px/1 sans-serif;
text-align: right;
color: #fff;
position: relative;
}
.arrow::before {
content: '';
border: 200px solid;
border-color: #f00 #00f rgba(0,0,255,0) rgba(255,0,0,0);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}