I need to get the same rectangle box as in the image. I tried this w3c code and played around. Still unable to get it the way I want. Please help with some suggestions.enter image description here
#div1 {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
border: 1px solid black;
-webkit-perspective: 150px;
/* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%;
/* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 15% 10%;
}
#div2 {
padding: 50px;
position: absolute;
border: 1px solid black;
background-color: blue;
-webkit-transform: rotateX(45deg);
/* Chrome, Safari, Opera */
transform: rotateX(25deg);
}
<div id="div1">
<div id="div2">sample</div>
</div>
Is this what you're looking for?
body {
background: #F4F7FA;
}
.center {
position: absolute;
top: 50%;
left: 50%;
margin: -100px;
}
.parent {
width: 200px;
height: 200px;
position: absolue;
-webkit-perspective: 1000px;
perspective: 1000px;
}
.child {
width: 100%;
height: 100%;
background: white;
border-radius: 10px;
box-shadow: 0px 3px 15px rgba(0,0,0,0.15);
-webkit-transform: rotateX(1deg) rotateY(9deg);
transform: rotateX(1deg) rotateY(22deg);
}
<div class="center">
<div class="parent">
<div class="child"></div>
</div>
<div>
Related
I am doing a this challenge on CSS Battle and get a very thin border around the rotated div object. Why is that? How can I get rid of it? When I submit it on the website it also scores only 98.somewhat %, so it's not just a rendering problem.
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<style>
body {
background: #222730;
margin: 0;
}
div {
position: absolute;
background: #4CAAB3;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#a {
width: 400px;
height: 150px;
}
#b {
z-index: 1;
border: solid 50px #222730;
width: 150px;
height: 150px;
transform: translate(-50%, -50%) rotate(45deg);
}
#c {
z-index: 2;
background: #393E46;
border-radius: 25px;
width: 50px;
height: 50px;
}
</style>
It's coming from the background property of #b (inherited from div).
Simply shift this property setting to be exclusive to #a:
body {
background: #222730;
margin: 0;
}
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#a {
width: 400px;
height: 150px;
background: #4CAAB3;
}
#b {
z-index: 1;
border: solid 50px #222730;
width: 150px;
height: 150px;
transform: translate(-50%, -50%) rotate(45deg);
}
#c {
z-index: 2;
background: #393E46;
border-radius: 25px;
width: 50px;
height: 50px;
}
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
You can simplify your code like below:
html {
background:
linear-gradient(#4CAAB3 0 0)center/100% 150px repeat-x /* the bar below the rotate square */
#222730
}
body {
width: 150px;
height: 150px;
margin: 25px auto;
border: 50px solid #222730; /* the border */
background:
#4CAAB3 padding-box /* the main color */
radial-gradient(1px, #393E46 24px, #0000 25px); /* the circle */
transform: rotate(45deg);
}
I am trying to make a sort of Venn-Diagram that is going to be used for navigation later.
I have three intersecting ellipsoids created with CSS shapes. Each ellipsoid, as well as their two intersections, will be distinct links later on. Also, when you hover over them they should pop out as per transform: scale(1.3).
My issue is that I'm using ellipsoids which are partially transparent with :after to create the intersections, which creates a problem when hovering over them because the :hover condition gets triggered when hovering anywhere on the partially transparent ellipsoid and not just the :after part. This means that the nonintersecting areas are not hoverable because they are obstructed by the other invisible ellipsoid.
I think the example will make this clearer.
Here is the code:
CSS:
.venn-container{position: relative; left: 0;}
.cat_one{
width: 400px;
height: 200px;
background: red;
border-radius: 200px / 100px;
position: absolute;
float: left;
opacity: 0.5;
}
.cat_two{
width: 400px;
height: 200px;
background: green;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 240px;
opacity: 0.5;
}
.cat_three{
width: 400px;
height: 200px;
background: blue;
border-radius: 200px / 100px;
position: absolute;
float: left;
left: 480px;
opacity: 0.5;
}
.int1{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
}
.int1:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: 240px;
}
.int1:hover{
transform: scale(1.3);
left: -35px;
}
.int2{
background: transparent;
width: 400px;
height: 200px;
border-radius: 200px / 100px;
position: relative;
opacity: 0.5;
overflow: hidden;
float: left;
left: 80px;
}
.int2:after{
background: black;
position: absolute;
content: '';
border-radius: 200px / 100px;
width: 400px;
height: 200px;
left: -240px;
}
.int2:hover{
transform: scale(1.3);
left: 115px;
}
HTML:
<div class="venn-container">
<div class="cat_one"></div>
<div class="cat_two"></div>
<div class="cat_three"></div>
<div class="int1"></div>
<div class="int2"></div>
</div>
And here is a fiddle: https://jsfiddle.net/y3Lvmuqg/2/
I would like the :hover to only get triggered in the intersections, and later make cat_one and cat_two hoverable outside the intersections.
I don't know if there is a way I'm doing this is the best and I'm open to suggestions.
Thanks for getting back to me #ge0rg I spent about an hour fiddling with CSS and HTML and came up with this code using just divs with background colors, hover events and border radius's (along with a few z-index and positioning techniques).
Hope you enjoy your reworked venn diagram...
You may have to mess around with the size, and definetly will have to mess with the positioning (however they're all inside a div and so it makes it so that you can just position the div and the rest will happen magically) I added a background color to the div just to show that nothing was transparent, and I also added a always on top function for viewing a section, and I hope you enjoy!
.Venn {
background: linear-gradient(to bottom right, blue, lightblue);
}
.d1:hover, .d2:hover, .d3:hover {
color: #565656;
animation: top 2s steps(2, end) forwards;
-webkit-animation: top 2s steps(2, end) forwards;
box-shadow: 0px 0px 20px white;
}
.d1, .d2, .d3 {
overflow-wrap: break-word;
}
.d1 center, .d3 center {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}
.d1 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 1;
position: absolute;
border-radius: 100%;
top: 0px;
}
.d3 {
padding: 10px;
width: 100px;
height: inherit;
z-index: 2;
position: absolute;
border-radius: 100%;
top: 0px;
left: 81px;
}
.d1:hover, .d3:hover {
transform: scale(1.05);
}
.d2 {
border-radius: 100% 0;
height: 90px;
width: 87.5px;
transform: rotate(-45deg) scale(.7);
position: absolute;
top: 15px;
left: 55.35px;
z-index: 3;
border: 1px solid black;
}
.d2b {
transform: rotate(45deg);
padding: 0;
margin: 0;
}
.d2b center {
position: relative;
left: 20px;
}
.d2:hover {
transform: rotate(-45deg);
}
.Venn {
height: 100px;
}
-webkit #keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
#keyframes top {
99% {
z-index: previous;
background-image: none;
}
100% {
z-index: 7;
}
}
<div class="Venn" style="position: relative; left: 50px; width: 300px; height: 100px;">
<div class="d1" style=" background-color: grey;">
<center> 1 </center>
</div>
<div class="d2" style=" background-color: #AAAAAA;">
<div class="d2b" style="max-width: inherit;">
<center> 2 </center>
</div>
</div>
<div class="d3" style=" background-color: lightgrey;">
<center> 3 </center>
</div>
</div>
For those of you who would prefer a JSfiddle/ CodePen here you go a Codepen.
I need to use inset Box-Shadow to simulate border, because I need to control how horizontal/vertical borders overlap if they have different colors.
Here I have a Top border only. However, Scale() and certain offsets causes a right/left borders to appear.
This happens on Chrome, but not IE or Edge.
Screenshot
I understand this is related to sub-pixels. Is there a mitigation?
Again, CSS border is not an option for me.
.element {
position: absolute;
left: 22px;
top: 20px;
width: 100px;
height: 100px;
background: yellow;
box-shadow: inset 0 1px 0 0 red;
padding: 5px;
box-sizing: border-box;
}
.container {
background: white;
transform: scale(1.2);
width: 200px;
height: 200px;
}
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="element">ABCD</div>
</div>
</body>
</html>
Thanks!
If you can't use a border on your .element, then why not create a pseudo-element to apply the border to? A transform: scale() would not change anything about how it looks.
*,
*::before {
box-sizing: border-box;
}
.container {
background: white;
transform: scale(1.2);
width: 200px;
height: 200px;
}
.element {
position: absolute;
left: 22px;
top: 20px;
width: 100px;
height: 100px;
background: yellow;
padding: 5px;
}
.element::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-top: 1px solid red;
}
<div class="container">
<div class="element">ABCD</div>
</div>
I am trying to create a footer according to a design I received ...
The background color on the left is different from the right one:
I have the following markup:
<div class"wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
My idea is Content DIV to have the logo as background image aligned left and no repeat.
But then I don't know how to create the different color on left and right ...
And I am not sure if I can control the height so that everything aligns.
The content div is centered and has the orange border on the image ...
Thank You,
Miguel
Try this http://codepen.io/nicknameless/pen/cblzB/
I've used CSS3 and no additional markup. This should work for you. It could be cleaned up I think, this is just a quick overview to get you started.
The HTML you provided
<div class="wrapper">
<div class="content">
The Text here should no go over the logo
</div>
</div>
The CSS
html, body {
padding: 0;
margin: 0;
}
div.wrapper {
height: 40px;
background: #850000;
width: 100%;
display: block;
position: relative;
overflow: visible;
top: calc( 100px - 40px );
}
div.wrapper:before {
background: transparent url('http://placehold.it/100x100') no-repeat 0 0;
content: " ";
width: 100px;
height: 100px;
position: absolute;
bottom: 0;
left: 10%;
}
div.content {
left: calc( 10% + 100px );
padding-left: 10px;
bottom: 0;
background-color: #C70000;
display: block;
height: 40px;
position: absolute;
width: calc( 100% - ( 10% + 100px ) );
}
It's was really a pain in the ass, I recommend to take the inner rectangle as a picture, but if you really want it in CSS, here it's: http://jsfiddle.net/B97ym/
HTML:
<div class='wrapper'>
<div class="content">The Text</div>
<div class='border'>
<div class='border2'></div>
<div class='border3'></div>
<div class='logodiv'>
<div class='rectangle'></div>
</div>
</div>
CSS:
.wrapper {
width: 500px;
height: 50px;
margin: 100px auto;
position: relative;
background: linear-gradient(to right, #9c9e9f 40%, #000000 40%);
}
.content{
margin: 0 0 0 50%;
color: #ffffff;
}
.border{
width: 4em;
height: 4em;
background: #FF0000;
position: absolute;
left: 33.7%;
top: -55%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
background: linear-gradient(to top, #000000 62%, #9c9e9f 62%);
}
.border2{
width: 0.8em;
height: 4em;
background: #9c9e9f;
position: absolute;
left: 80%;
}
.border3{
width: 0.8em;
height: 0.85em;
background: #000000;
position: absolute;
left: 80%;
top: 80%;
}
.logodiv {
width: 2.5em;
height: 2.5em;
background: #ffffff;
position: absolute;
top: 18%;
left: 18%;
}
.rectangle{
width: 2.1em;
height: 2.1em;
position: relative;
background: #ffffff;
top: -42%;
left: -42%;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
Hope it's will be helpful to someone (:
Use a CSS background-image on the wrapper layer that contains the entire logo, bars an all. Add enough margin-left on the inner layer to shove the text beyond the logo.
Create a div with two div's inside with 50% width for left and right and fixed height. Make sure you overflow the logo.
I wonder if this FIDDLE will give you a place to start.
CSS
.holder {
width: 500px;
margin: 100px auto;
position: relative;
}
.leftdiv {
width: 40%;
height: 60px;
float: left;
background-color: red;
}
.rightdiv {
width: 60%;
height: 60px;
float: left;
background-color: blue;
}
.logodiv {
width: 44px;
height: 44px;
position: absolute;
left: 157px;
top: -42px;
background-color: white;
transform: rotate(45deg);
border-left: 20px solid blue;
border-right: 20px solid red;
border-top: 20px solid red;
border-bottom: 20px solid blue;
}
.whiteout {
background-color: white;
width: 30px;
height: 60px;
border: 0px solid black;
position: absolute;
top: -60px;
left: 183px;
}
I am using border-radius property to acheive rounded corners. But I am not sure how to get rounded corners of this shape. I tried giving same dimensions from either sides but they just dont give me the exact shape. Am I missing some CSS3 property here.
Just wondering if clip css property is the answer.
UPDATE:
http://jsfiddle.net/YWnzc/136/
Demo
#player {
margin: 32px;
position: relative;
width: 400px;
height: 250px;
background-color: #222;
}
#inner {
transform: rotate(45deg);
background-color: silver;
width: 100px;
height: 100px;
top: 20px;
left: -50px;
position: relative;
border-radius: 20px;
}
#outer {
position: absolute;
top: 50px;
left: 165px;
width: 70px;
height: 140px;
overflow: hidden;
}
<div id="player">
<div id="outer">
<div id="inner"></div>
</div>
</div>
This should produce:
The effect is achieved by creating a square, rotating it with a CSS transform, rounding the corners, and clipping it with an outer box. The inner element can be adjusted as desired, so it is somewhat flexible.
http://css3shapes.com/ has some nice examples (note the heart at the bottom of the page)
Alternatives
SVG images support shapes of this type and are supported in all modern browsers. Simple SVGs can be coded by hand as XML, and there are a variety of free/paid editors for working with them.
See also: Raphaël, a library for working with vector graphics on the web
Triangles in different sizes with border radius
To flip or to change vertical alignment fork translateY() and rotate()
/*triangle background large*/
.triangle-bg-lg, .triangle-bg-lg:before, .triangle-bg-lg:after { width: 25em; height: 25em; }
/*triangle background medium*/
.triangle-bg-md, .triangle-bg-md:before, .triangle-bg-md:after { width: 20em; height: 20em; }
/*triangle background small*/
.triangle-bg-sm, .triangle-bg-sm:before, .triangle-bg-sm:after { width: 15em; height: 15em; }
/*triangle background extra small*/
.triangle-bg-xs, .triangle-bg-xs:before, .triangle-bg-xs:after { width: 10em; height: 10em; }
/*triangle background extra extra small*/
.triangle-bg-xxs, .triangle-bg-xxs:before, .triangle-bg-xxs:after { width: 5em; height: 5em; }
/*common triangle style*/
.triangle-bg-lg,.triangle-bg-md, .triangle-bg-sm,.triangle-bg-xs,.triangle-bg-xxs {
overflow: hidden;
position: relative;
margin:2em auto;
border-radius: 20%;
transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(.866);
}
.triangle-bg-lg:before, .triangle-bg-lg:after,.triangle-bg-md:before, .triangle-bg-md:after, .triangle-bg-sm:before, .triangle-bg-sm:after,.triangle-bg-xxs:before, .triangle-bg-xxs:after{
position: absolute;
background: #ccc;
pointer-events: auto;
content: '';
}
.triangle-bg-xs:before, .triangle-bg-xs:after{
background: #ccc;
position: absolute;
pointer-events: auto;
content: '';
}
.triangle-bg-lg:before, .triangle-bg-md:before, .triangle-bg-sm:before, .triangle-bg-xs:before,.triangle-bg-xxs:before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle-bg-lg:after, .triangle-bg-md:after,.triangle-bg-sm:after,.triangle-bg-xs:after,.triangle-bg-xxs:after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%)
skewX(-30deg) scaleY(.866) translateX(24%);
}
<div class="page-container">
<div class="triangle-bg-lg"></div>
<div class="triangle-bg-md"></div>
<div class="triangle-bg-sm"></div>
<div class="triangle-bg-xs"></div>
<div class="triangle-bg-xxs"></div>
</div>
If I have understood your question properly. I think you can use something like below:
CSS:
#box{ border-color: transparent transparent transparent #FFFFFF;
border-style: solid;
border-width: 50px 0 50px 75px;
height: 0;
left: -40px;
margin: 40px;
position: absolute;
width: 0;
}
#outerbox{ background:red;
height: 300px;
position: relative;
width: 122px;
}
HTML
<div id="outerbox"><div id="box"></div></div>
LIVE DEMO
http://jsfiddle.net/fsGQR//
<!DOCTYPE html>
<html>
<head>
<style>
.trio {position:absolute;}
.trio .triangle {
position: relative;
background-color: #DB524B;
text-align: left;
}
.trio .triangle:before,
.trio .triangle:after {
content: '';
position: absolute;
background-color: inherit;
}
.trio .triangle,
.trio .triangle:before,
.trio .triangle:after {
width: 3em;
height: 3em;
border-top-right-radius: 33%;
}
.trio .triangle {
transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
}
.trio .triangle:before {
transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
}
.trio .triangle:after {
transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
}
.trio .exclamation{
color: #DB524B;
position:absolute;
font-size:50px;
top:8px;
left:15px;
z-index:2;
}
.trio .triangle.tri-in {
background-color: #fff;
margin-top: -2.9em;
margin-left: 1px;
}
.trio .tri-in,
.trio .tri-in:before,
.trio .tri-in:after {
width: 2.9em;
height: 2.9em;
border-top-right-radius: 33%;
}
/* styles below for demonstration purposes only */
body { padding: 30%; }
</style>
</head>
<body>
<div class="trio">
<span class="exclamation">!</span>
<div class='triangle'></div>
<div class='triangle tri-in'></div>
</div>
</body>
</html>
This is even better
CSS
.c1 {
width:50px;
height:50px;
background-color:yellow;
-webkit-transform:rotate(45deg);
position: relative;
top: -65px;
left: 25px;
z-index:-1;
border: 2px solid rgba(0,255,0,.6);
}
.c2 {
width: 50px;
height: 72px;
background-color: yellow;
z-index: 10000;
border: 2px solid rgba(0,255,0,.6);
border-right: 0;
}
HTML
<div class="c2">Hello</div>
<div class="c1"></div>
DEMO: http://jsfiddle.net/YWnzc/237/
I used this for add triagle to link:
.review-box_left-link:after{
content: '';
position: absolute;
width: 19px;
height: 19px;
background: #2195DB;
border-radius: 2px;
transform: rotate(-45deg);
background: linear-gradient(to right bottom, white 0%,white 50%,#2195DB 50%,#2195DB 50%,#2195DB 100%);
}