I am attempting to align the border of the pseudo-element to evenly match the border of the button. I am using ::before and ::after pseudo-elements overlaid to get this effect, but they do not properly match the rest of the border.
I have messed around with the left and right positioning as well as the border-width of each element, but can't seem to get them to line up perfectly
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.btn-txt{
color: black;
}
button {
border: none;
outline: none;
padding: 0;
border-width: 0;
left: 40%;
}
button:hover {
cursor: pointer;
}
.signpost { /* our rectangle */
width:250px;
height:50px;
background-color: yellow;
margin:0px auto;
position: relative;
border-top: 2px solid red;
border-bottom: 2px solid red;
border-left: 2px solid red;
}
.signpost:after { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:81%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: #fff; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
.signpost:before { /* our pseudo-element */
content:"";/* required */
position: absolute; /* takes the 'cap' out off flow */
top:0%; /* stick it to top edge of the sign */
left:80%; /* push it way overto the right*/
height:0; /* we're doing this with borders remember */
width:0;
border-width: 25px;
border-style:solid;
border-color: red; /* same as bg of our rectangle */
/* now we make some of theborders disappear*/
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
}
<button class="signpost">
<p class="btn-txt">HELLO</p>
</button>
Example of current issue: https://codepen.io/codingforthefuture/pen/YzKeeVJ
Here is a different idea with less of code where the alignment will be easy to handle:
.box {
display:inline-block;
position:relative;
margin:10px;
padding:10px 50px 10px 10px;
border:2px solid red;
border-right:0;
z-index:0;
background:linear-gradient(yellow,yellow) left/calc(100% - 40px) 100% no-repeat;
}
.box:before,
.box:after{
content:"";
position:absolute;
z-index:-1;
right:0;
width:40px;
top:0;
bottom:50%;
border-right:2px solid red;
background:yellow;
transform:skewX(-45deg);
transform-origin:top;
}
.box:after {
transform:skewX(45deg);
transform-origin:bottom;
top:50%;
bottom:0;
}
<div class="box"> some text </div>
<div class="box"> some long long text </div>
<div class="box"> some long <br> long text </div>
I think I came to a suitable solution. From my original attempt I made the pseudo elements complete squares and rotated them 45deg, then overlapped them. I think this resolves the issues when zooming in and out too. It also makes the edges of the flag pointed instead of squared off, which I think looks better.
#flag4 {
width: 200px;
height: 56px;
box-sizing: content-box;
padding-top: 15px;
position: relative;
background: yellow;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
margin-bottom: 20px;
}
#flag4::before,
#flag4::after {
content: "";
position: absolute;
top: 10px;
width: 0;
height: 0;
left: 87.2%;
border-right: 26px solid #fff;
border-top: 26px solid #fff;
border-bottom: 25px solid #fff;
border-left: 25px solid #fff;
transform: rotate(45deg);
}
#flag4::before{
border-right: 26px solid red;
border-top: 26px solid red;
border-bottom: 25px solid red;
border-left: 25px solid red;
left: 86.6%;
}
codepen: https://codepen.io/codingforthefuture/pen/WNezNzZ
I have on picture, over her one span.
My span have background color white, and i want to set text transparent.
Like this:
http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG
I tried:
Background-color:white;
color:transparent;
But not working.
HTML:
<div class="col-md-12 picturebee no-padding">
<img class="beepic" src="img/img7.jpg" alt="Picture bee">
<span class="text">Lorem ipsum dolor!</span>
</div>
CSS
.picturebee{
margin-top:50px;
position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
color:white;
font-family: 'Cuprum', sans-serif;
left: 35%;
transform: translateX(-26%);
text-shadow: 1.4px 1.4px #222;
}
try this css:
.picturebee{
margin-top:50px;
position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
background-color:white;
font-family: 'Cuprum', sans-serif;
left: 35%;
transform: translateX(-26%);
text-shadow: 1.4px 1.4px #222;
}
.text{opacity: 0.5;}
You can try the
opacity: 0.0; Propriety
Right code :
.picturebee{
margin-top:50px;
position: relative;
}
.picturebee span{
position: absolute;
top:30px;
font-size:53px;
color:white;
font-family: 'Cuprum', sans-serif;
left: 35%;
transform: translateX(-26%);
text-shadow: 1.4px 1.4px #222;
opacity: 0.0;
}
Just set the text-color to transparent will not work!
Explanation: if you use background: white; and color: transparent;, you got a transparent text over a white background. You won't "erase" the background: white;.
To solve your problem, you could add a second span and use background-clip: text; (but this only works in webkit)
For more browser support, you can check this site: https://css-tricks.com/image-under-text/
.picturebee {
margin-top: 50px;
position: relative;
height: 160px;
width: 588px;
background: url(http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG);
}
.picturebee span.box {
background: white;
position: absolute;
top: 20px;
left: 20px;
width: 500px;
height: 60px;
}
.picturebee span.text {
position: absolute;
top: 20px;
background: -30px -20px url(http://justdrop.me/b26e25bf4544a68a4e7b76c73169a4d1.PNG);
font-size: 53px;
color: transparent;
-webkit-background-clip: text;
font-family: 'Cuprum', sans-serif;
left: 30px;
word-wrap: no-break;
}
<div class="col-md-12 picturebee no-padding">
<span class="box"></span>
<span class="text">Lorem ipsum dolor!</span>
</div>
Also you could set the picture as background instead of adding it as an img
If it's an image:
img {
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
source: http://www.w3schools.com/css/css_image_transparency.asp
I'm trying to make the div for bootstrap to look like below not sure how you do it with css. The arrow and the section labeleled movies
Please view the pic at https://plus.google.com/+SamuelMuiruri/posts/fMMhNQwPbCm
First of all you have to position the title "Movies" about the description. The arrow is a only a little css magic
HTML:
<div class="container">
<div class="row">
<div class="col-sm-4">
<div class="specialbox">
<img src="https://placeimg.com/320/240/tech"/>
<div class="specialbox__description">
<span class="specialbox__title">Movies</span>
<h2>Age of Ultron</h2>
<p>Tony Stark tries ti jumpstart a dormant peace-kepping program...</p>
</div>
</div>
</div>
</div>
</div>
CSS:
.specialbox {
border: 3px solid #ccc;
}
.specialbox img {
width: 100%;
}
.specialbox__description {
position: relative; /* You need this, to position the title element absolute to the description */
padding: 20px 10px;
}
.specialbox__title {
position: absolute;
background-color: yellow;
text-transform: uppercase;
padding: 10px;
border-radius: 10px 10px 0 0;
top: -40px; /* Adjust to the height of the title container */
}
/* Magic described here */
.specialbox__title:after {
position: absolute;
display: block;
content: '';
width: 30px;
height: 30px;
border: 15px solid transparent;
left: 50%;
bottom: -30px;
margin-left: -15px;
border-top: 15px solid yellow;
}
http://jsfiddle.net/ytbtbt1d/
I think you want to create a TRIANGLE edge below the div containg the text -'MOVIES' (see screenshot below)
I have created a code for you here: JSFIDDLE
HTML:
<div>Movies</div>
CSS
div{
position: relative;
display:inline-block;
width: 140px;
padding: 10px;
background:#FFC000;
text-transform: uppercase;
font-size: 24px;
text-align: center;
}
div:after{
position: absolute;
width: 0;
height: 0;
border-bottom: 40px solid rgba(0, 0, 0, 0);
border-right: 40px solid #FFC000;
bottom: -15px;
left: 0;
right:0;
margin:auto;
content: '';
-ms-transform: rotate(135deg); /* IE 9 */
-webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
transform: rotate(135deg);
}
I'm trying to get a trapezoidal perspective shape to have the whole area be clickable. I've gotten it to work in Firefox and even IE, but Chrome isn't cooperating too well.
Here's a fiddle with the shape and a link: http://jsfiddle.net/9n9uh6f6/1/
As you can tell, the link doesn't become active until you hover over the 'area' part of the text. In other browsers, the whole height of the shape is clickable.
I read that Chrome renders a perspective image differently and perhaps that's why it's not doing what it's supposed to.
Here's my CSS:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}
Please have look at this code:
.prodcaptions {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
perspective: 150px;
perspective-origin: 50% 0;
}
a{
padding: 50px;
position: absolute;
border: 1px solid black;
transform: rotateX(-15deg);
}
Seems to work the way you want it. fiddle
Try this shape for link trapazoid shape - jsFiddle
Advantage - you can change skew property to change angle of shape! Easy and effective! Reverse value for reverse shape!
html
Click Here!
css
a {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 136px;
height: 85px;
/* demo-only decoration */
margin: 100px auto;
font: 16px/50px Arial, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: orange;
}
a:before, a:after {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
/* demo-only decoration */
border-radius: 4px;
background-color: orange;
}
a:before {
transform: skew(-20deg);
left: 25px;
}
a:after {
transform: skew(20deg);
right: 25px;
left: auto;
}
I've got a div that looks like a orange square
I'd like to draw a white X in this div somehow so that it looks more like
Anyway to do this in CSS or is it going to be easier to just draw this in Photoshop and use the image as the div background? The div code just looks like
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
You want an entity known as a cross mark:
http://www.fileformat.info/info/unicode/char/274c/index.htm
The code for it is ❌ and it displays like ❌
If you want a perfectly centered cross mark, like this:
try the following CSS:
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
position: relative;
}
div:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: "\274c"; /* use the hex value here... */
font-size: 50px;
color: #FFF;
line-height: 100px;
text-align: center;
}
See Demo Fiddle
Cross-Browser Issue
The cross-mark entity does not display with Safari or Chrome. However, the same entity displays well in Firefox, IE and Opera.
It is safe to use the smaller but similarly shaped multiplication sign entity, × which displays as ×.
single element solution:
body{
background:blue;
}
div{
width:40px;
height:40px;
background-color:red;
position:relative;
border-radius:6px;
box-shadow:2px 2px 4px 0 white;
}
div:before,div:after{
content:'';
position:absolute;
width:36px;
height:4px;
background-color:white;
border-radius:2px;
top:16px;
box-shadow:0 0 2px 0 #ccc;
}
div:before{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
left:2px;
}
div:after{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
right:2px;
}
<div></div>
Yet another pure CSS solution (i.e. without the use of images, characters or additional fonts), based on #Bansoa is the answer's answer .
I've simplified it and added a bit of Flexbox magic to make it responsive.
Cross in this example automatically scales to any square container, and to change the thickness of its lines one have just to tune height: 4px; (to make a cross truly responsive, you may want to set the height in percents or other relative units).
div {
position: relative;
height: 150px; /* this can be anything */
width: 150px; /* ...but maintain 1:1 aspect ratio */
display: flex;
flex-direction: column;
justify-content: center;
}
div::before,
div::after {
position: absolute;
content: '';
width: 100%;
height: 4px; /* cross thickness */
background-color: black;
}
div::before {
transform: rotate(45deg);
}
div::after {
transform: rotate(-45deg);
}
<div></div>
You can make a pretty nice X with CSS gradients:
demo: https://codepen.io/JasonWoof/pen/rZyRKR
code:
<span class="close-x"></span>
<style>
.close-x {
display: inline-block;
width: 20px;
height: 20px;
border: 7px solid #f56b00;
background:
linear-gradient(45deg, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 43%,#fff 45%,#fff 55%,rgba(0,0,0,0) 57%,rgba(0,0,0,0) 100%),
linear-gradient(135deg, #f56b00 0%,#f56b00 43%,#fff 45%,#fff 55%,#f56b00 57%,#f56b00 100%);
}
</style>
Yet another attempt... this one uses ×. A lot of the examples on this page only show for me as a box, but × works
HTML
<div class="close"></div>
CSS
.close {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
.close:after {
position:relative;
content:"\d7";
font-size:177px;
color:white;
font-weight:bold;
top:-53px;
left:-2px
}
JSFIDDLE
You could just put the letter X in the HTML inside the div and then style it with css.
See JSFiddle: http://jsfiddle.net/uSwbN/
HTML:
<div id="orangeBox">
<span id="x">X</span>
</div>
CSS:
#orangeBox {
background: #f90;
color: #fff;
font-family: 'Helvetica', 'Arial', sans-serif;
font-size: 2em;
font-weight: bold;
text-align: center;
width: 40px;
height: 40px;
border-radius: 5px;
}
You can use the CSS property "content":
div {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
div:after {
content: "X";
font-size: 2em;
color: #FFF;
}
Like this:
http://jsfiddle.net/HKtFV/
#x{
width: 20px;
height: 20px;
background-color:orange;
position:relative;
border-radius:2px;
}
#x::after,#x::before{
position:absolute;
top:9px;
left:0px;
content:'';
display:block;
width:20px;
height:2px;
background-color:red;
}
#x::after{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#x::before{
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div id=x>
</div>
I love this question! You could easily adapt my code below to be a white × on an orange square:
Demo fiddle here
Here is the SCSS (which could easily be converted to CSS):
$pFontSize: 18px;
p {
font-size: $pFontSize;
}
span{
font-weight: bold;
}
.x-overlay,
.x-emoji-overlay {
position: relative;
}
.x-overlay,
.x-emoji-overlay {
&:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: red;
text-align: center;
}
}
.x-overlay:after {
content: '\d7';
font-size: 3 * $pFontSize;
line-height: $pFontSize;
opacity: 0.7;
}
.x-emoji-overlay:after {
content: "\274c";
padding: 3px;
font-size: 1.5 * $pFontSize;
line-height: $pFontSize;
opacity: 0.5;
}
.strike {
position: relative;
display: inline-block;
}
.strike::before {
content: '';
border-bottom: 2px solid red;
width: 110%;
position: absolute;
left: -2px;
top: 46%;
}
.crossed-out {
/*inspired by https://www.tjvantoll.com/2013/09/12/building-custom-text-strikethroughs-with-css/*/
position: relative;
display: inline-block;
&::before,
&::after {
content: '';
width: 110%;
position: absolute;
left: -2px;
top: 45%;
opacity: 0.7;
}
&::before {
border-bottom: 2px solid red;
-webkit-transform: skewY(-20deg);
transform: skewY(-20deg);
}
&::after {
border-bottom: 2px solid red;
-webkit-transform: skewY(20deg);
transform: skewY(20deg);
}
}
You could do this by styling an "x"
text-align: center;
font-size: 120px;
line-height: 100px;
color: white;
font-family: monospace;
http://jsfiddle.net/Ncvyj/1/
Here is a single div and dynamic size version without using pseudo element.
body {
display: flex;
gap: 30px;
}
.x {
--color: #444;
--l: 5px; /* line-width */
width: 50px;
height: 50px;
background: linear-gradient(to top right, transparent calc(50% - var(--l) / 2), var(--color) calc(50% - var(--l) / 2) calc(50% + var(--l) / 2), transparent calc(50% + var(--l) / 2)),
linear-gradient(to bottom right, transparent calc(50% - var(--l) / 2), var(--color) calc(50% - var(--l) / 2) calc(50% + var(--l) / 2), transparent calc(50% + var(--l) / 2));
--clip-path: polygon(var(--l) 0%, calc(100% - var(--l)) 0%, 100% var(--l), 100% calc(100% - var(--l)), calc(100% - var(--l)) 100%, var(--l) 100%, 0% calc(100% - var(--l)), 0% var(--l));
-webkit-clip-path: var(--clip-path);
clip-path: var(--clip-path);
}
<div class="x"></div>
<div class="x" style="--l: 10px;"></div>
<div class="x" style="--l: 15px; --color: red"></div>
<div class="x" style="--l: 15px; --color: dodgerblue; width: 100px; height: 100px;"></div>
HTML
<div class="close-orange"></div>
CSS
.close-orange {
height: 100px;
width: 100px;
background-color: #FA6900;
border-radius: 5px;
}
.close-orange:before,.close-orange:after{
content:'';
position:absolute;
width: 50px;
height: 4px;
background-color:white;
border-radius:2px;
top: 55px;
}
.close-orange:before{
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
left: 32.5px;
}
.close-orange:after{
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
transform:rotate(-45deg);
left: 32.5px;
}
https://jsfiddle.net/cooperwebdesign/dw4xd289/
A modern answer with good browser support.
<span>×</span>
This technically puts the multiplication symbol there, but no one will really notice (found some websites that have a popup box and most use this for the x button).
If you need more control you can style it with color opacity etc...
example (index.html)
<span class="x-button">×</span>
styles.css
span.x-button {
color:gray;
opacity:0.7;
font-size:1.5em;
}
Result (first example)
<span>×</span>
Result (2nd example)
span {
color:gray;
opacity:0.7;
font-size:1.5em;
}
<span class="x-button">×</span>
Note: you can highlight this unlike other solutions, but this may not be desirable depending on the application. You can solve this in pure css too, just add
user-select:none;
-webkit-user-select:none;
This is an adaptable version of the amazing solution provided by #Gildas.Tambo elsewhere in this page.
Simply change the values of the variables at the top to change the size of the "X".
Credit for the solution itself goes to Gildas. All I've done is given it adaptable math.
:root {
/* Width and height of the box containing the "X" */
--BUTTON_W: 40px;
/* This is the length of either of the 2 lines which form the "X", as a
percentage of the width of the button. */
--CLOSE_X_W: 95%;
/* Thickness of the lines of the "X" */
--CLOSE_X_THICKNESS: 4px;
}
body{
background:blue;
}
div{
width: var(--BUTTON_W);
height: var(--BUTTON_W);
background-color:red;
position: relative;
border-radius: 6px;
box-shadow: 2px 2px 4px 0 white;
}
/* The "X" in the button. "before" and "after" each represent one of the two lines of the "X" */
div:before,div:after{
content: '';
position: absolute;
width: var(--CLOSE_X_W);
height: var(--CLOSE_X_THICKNESS);
background-color:white;
border-radius: 2px;
top: calc(50% - var(--CLOSE_X_THICKNESS) / 2);
box-shadow: 0 0 2px 0 #ccc;
}
/* One line of the "X" */
div:before{
-webkit-transform:rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
left: calc((100% - var(--CLOSE_X_W)) / 2);
}
/* The other line of the "X" */
div:after{
-webkit-transform:rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
right: calc((100% - var(--CLOSE_X_W)) / 2);
}
<div></div>
Check & and Cross:
<span class='act-html-check'></span>
<span class='act-html-cross'><span class='act-html-cross'></span></span>
<style type="text/css">
span.act-html-check {
display: inline-block;
width: 12px;
height: 18px;
border: solid limegreen;
border-width: 0 5px 5px 0;
transform: rotate( 45deg);
}
span.act-html-cross {
display: inline-block;
width: 10px;
height: 10px;
border: solid red;
border-width: 0 5px 5px 0;
transform: rotate( 45deg);
position: relative;
}
span.act-html-cross > span { {
transform: rotate( -180deg);
position: absolute;
left: 9px;
top: 9px;
}
</style>