Am trying to get a shape drawn in css on the header of my webpage. it supposed to look like this.
The shape am trying to draw for my header
but when I try to get the exact shape, IT looks like this below (Run the snippet)
Am not so good at css so am struggling here. The codes are below.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
border-left: 280px solid white;
border-top: 20px solid white;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw"></div>
<div id="green"></div>
</section>
What Am trying to achieve with my header and shape drawing
final look I want to achieve or what it should should look like at the end
You can just create a small white rectangle at the left top, skew it and move it a little to the left to remove the green triangle:
.green {
background-color:#0f0;
height:60px;
width:100%;
}
.draw {
height:30px;
margin-left:-15%;
width:30%;
background-color:#fff;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
}
<div class="green">
<div class="draw">
</div>
</div>
Try using :after. See this snippet.
header {
padding: 0px !important;
height: auto !important;
}
.header {
top: 0px;
width: 100%;
height: auto !important;
padding: 0px !important;
background-color: #00ff00;
}
.spanheader {
font-size: 20px;
}
.logo {
z-index: 1;
position: relative;
}
.topheader {
text-align: center;
width: 100%;
background-color: lightgray;
left: 0px !important;
top: 0px !important;
}
#draw {
height: 30px;
width: 100%;
background-color: #fff;
}
#green {
height: 60px;
width: 100%;
border-width: 0px;
position:relative;
}
#green:after{
content:'';
position:absolute;
top:0;
left:-25px;
height:30px;
width:250px;
background:white;
-moz-transform: skew(-60deg);
-webkit-transform: skew(-60deg);
transform: skew(-60deg);
}
<html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!-- Mirrored from byrushan.com/projects/ma/1-6-1/jquery/light/login.html by HTTrack Website Copier/3.x [XR&CO'2014], Tue, 14 Jun 2016 14:12:13 GMT -->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WEBPAGE </title>
</head>
<body>
<section id="header" class="header">
<div class="topheader">
<span class="spanheader f-700 c-gray">HEADER</span>
</div>
<div id="draw">
</div>
<div id="green"></div>
</section>
</body>
</html>
Take a look at this JSFiddle
header{
text-align:center;
padding: 5px 0;
background: grey;
color: white;
}
footer{
text-align: center;
padding: 50px 0;
position: relative;
}
footer::before,footer::after{
content: '';
display: inline-block;
width: 70%;
height: 50px;
background: green;
position: absolute;
bottom: 0;
right: -10px;
transform: skewX(-30deg);
}
footer::after{
width: 100%;
height: 30px;
transform: skewX(0);
}
#header {
width: 100%;
height: 30px;
background: #CCC;
text-align: center;
line-height: 30px;
}
#slashWrapper {
position: relative;
background: #FFF;
width: 100%;
height: 100px;
}
#whiteSlash {
height: 75px;
width: 300px;
background: #FFF;
position: absolute;
top: 0px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
#greenSlash {
height: 50px;
width: 100%;
position: absolute;
bottom: 0px;
background: #00ff00;
}
#whiteSlashBottomCorner {
height: 25px;
width: 25px;
background: #FFF;
position: absolute;
bottom: 0px;
right: -25px;
-moz-transform: skew(-45deg);
-webkit-transform: skew(-45deg);
transform: skew(-45deg);
z-index: 2;
}
<div id="header">HEADER</div>
<div id="slashWrapper">
<div id="whiteSlash"></div>
<div id="greenSlash"></div>
<div id="whiteSlashBottomCorner">
</div>
Related
I have been trying to build the following design using html/css:
So far I have been able to achieve the following:
but now I'm stuck and have not made progress since the last 2 days - so I am looking for help!
Also, is it possible to make this responsive?
To achieve the above I have written the following code:
.contain {
position: absolute;
height: 400px;
width: 700px;
left: 5%;
}
.hex {
position: absolute;
width: 125px;
height: 200px;
border-radius: 25px;
background: green;
}
.hex:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
transform: rotate(60deg);
background: green;
}
.hex:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
transform: rotate(-60deg);
background: green;
}
.innerHexagon {
width: 100px;
height: 152px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-radius: 20px;
}
.innerHexagon:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
transform: rotate(60deg);
background: green;
border-radius: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.innerHexagon:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
transform: rotate(-60deg);
background: green;
border-radius: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.test {
position: absolute;
width: 1600px;
/*width: 400px;*/
height: 200px;
z-index: -1;
border-right: 0px;
background: grey;
border-radius: 30px;
}
.test:before {
position: absolute;
content: '';
width: 140px;
/*width: 35%;*/
height: 100%;
transform: rotate(60deg);
left: 1460px;
/*left: 260px;*/
border-radius: 30px;
background: grey;
}
.test:after {
position: absolute;
content: '';
width: 140px;
/*width: 35%;*/
height: 100%;
transform: rotate(-60deg);
left: 1460px;
/*left: 260px;*/
border-radius: 30px;
background: grey;
}
.text {
padding-top: 25px;
padding-left: 50px;
font-size: xx-large;
font-family: sans-serif;
color: Black;
position: absolute;
width: 100%;
text-align: center;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
</head>
<body>
<div class="contain">
<div class="hex">
<div class="innerHexagon" style="z-index:1">
</div>
</div>
<div class="test">
</div>
<div class="hex" style="left: 500px">
<div class="innerHexagon" style="z-index:1">
</div>
</div>
<div class="hex" style="left: 1000px">
<div class="innerHexagon" style="z-index:1">
</div>
</div>
</div>
</body>
</html>
I was able to come up with this solution for those white strips. I have added span element inside .hex div for the purpose and added styles at the end of your original styles. As for the responsive part, you need to elaborate the details on how you want the design to behave on different screens so we may be able to help that way.
.contain {
position: absolute;
height: 400px;
width: 700px;
left: 5%;
}
.hex {
position: absolute;
width: 125px;
height: 200px;
border-radius: 25px;
background: green;
}
.hex:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
transform: rotate(60deg);
background: green;
}
.hex:after {
position: absolute;
content: '';
width: 100%;
height: 100%;
border-radius: 25px;
transform: rotate(-60deg);
background: green;
}
.innerHexagon {
width: 100px;
height: 152px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: green;
border-top: 2px solid white;
border-bottom: 2px solid white;
border-radius: 20px;
}
.innerHexagon:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
transform: rotate(60deg);
background: green;
border-radius: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.innerHexagon:after {
content: '';
width: 100%;
height: 100%;
position: absolute;
transform: rotate(-60deg);
background: green;
border-radius: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
}
.test {
position: absolute;
width: 1600px;
/*width: 400px;*/
height: 200px;
z-index: -1;
border-right: 0px;
background: grey;
border-radius: 30px;
}
.test:before {
position: absolute;
content: '';
width: 140px;
/*width: 35%;*/
height: 100%;
transform: rotate(60deg);
left: 1460px;
/*left: 260px;*/
border-radius: 30px;
background: grey;
}
.test:after {
position: absolute;
content: '';
width: 140px;
/*width: 35%;*/
height: 100%;
transform: rotate(-60deg);
left: 1460px;
/*left: 260px;*/
border-radius: 30px;
background: grey;
}
.text {
padding-top: 25px;
padding-left: 50px;
font-size: xx-large;
font-family: sans-serif;
color: Black;
position: absolute;
width: 100%;
text-align: center;
z-index: 1;
}
/* new styles added */
.white-strip::after, .white-strip::before {
content: '';
height: 115px;
width: 50px;
background: transparent;
position: absolute;
border-right: 5px solid #ffffff;
left: -140px;
}
.white-strip::after {
bottom: 4px;
transform: rotate(25deg);
border-top-right-radius: 10px;
}
.white-strip::before {
top: 4px;
transform: rotate(-25deg);
border-bottom-right-radius: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="contain">
<div class="test"></div>
<div class="hex">
<div class="innerHexagon" style="z-index:1"></div>
</div>
<div class="hex" style="left: 500px">
<span class="white-strip"></span> <!-- added -->
<div class="innerHexagon" style="z-index:1"> </div>
</div>
<div class="hex" style="left: 1000px">
<span class="white-strip"></span> <!-- added -->
<div class="innerHexagon" style="z-index:1"></div>
</div>
</div>
<script type="text/javascript" src="index.js"></script>
</body>
</html>
I have a game that looks a bit like a game from 1980. And i have this dialog:
#firstPageText {
width: 300px;
min-height: 100px;
border: 2px solid;
padding: 1em;
margin: 0;
position: absolute;
bottom: 50px;
left: 50%;
-ms-transform: translate(-50%, 0%);
transform: translate(-50%, 0%);
font-family: 'Press Start 2P', cursive;
border-radius: 5px;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<p id="firstPageText">
This is a test text.
</p>
I wanted to add a border-radius to this dialog like the ones from pokemon:
Is there a way to achieve this pixeled border-radius, instead of the rounded border-radius?
I would consider mulitiple background:
#firstPageText {
--b:5px; /* the thickness */
--c:#000; /* the color */
width: 300px;
min-height: 100px;
font-family: 'Press Start 2P', cursive;
padding:calc(5*var(--b));
position:relative;
}
#firstPageText::before,
#firstPageText::after {
content:"";
position:absolute;
inset:0 0 50% 0;
background:
linear-gradient(var(--c) 0 0) 50% 0 /calc(100% - 4*var(--b)) var(--b),
linear-gradient(var(--c) 0 0) 0% 100%/var(--b) calc(100% - 2*var(--b)),
linear-gradient(var(--c) 0 0) 100% 100%/var(--b) calc(100% - 2*var(--b)),
conic-gradient(from 90deg,var(--c) 90deg,#0000 0) 0 0/calc(2*var(--b)) calc(2*var(--b)),
conic-gradient(from 180deg,var(--c) 90deg,#0000 0) 100% 0/calc(2*var(--b)) calc(2*var(--b));
background-repeat:no-repeat;
}
#firstPageText::after {
transform-origin:bottom;
transform:scaleY(-1);
}
<p id="firstPageText">
This is a test text.
</p>
Apply different colors to understand the puzzle:
#firstPageText {
--b:10px; /* adjust this */
width: 300px;
min-height: 100px;
font-family: 'Press Start 2P', cursive;
padding:calc(5*var(--b));
position:relative;
}
#firstPageText::before,
#firstPageText::after {
content:"";
position:absolute;
inset:0 0 50% 0;
background:
linear-gradient(red 0 0) 50% 0 /calc(100% - 4*var(--b)) var(--b),
linear-gradient(blue 0 0) 0% 100%/var(--b) calc(100% - 2*var(--b)),
linear-gradient(green 0 0) 100% 100%/var(--b) calc(100% - 2*var(--b)),
conic-gradient(from 90deg,orange 90deg,lightblue 0) 0 0/calc(2*var(--b)) calc(2*var(--b)),
conic-gradient(from 180deg,purple 90deg,lightblue 0) 100% 0/calc(2*var(--b)) calc(2*var(--b));
background-repeat:no-repeat;
}
#firstPageText::after {
transform-origin:bottom;
transform:scaleY(-1);
filter:hue-rotate(180deg);
}
<p id="firstPageText">
This is a test text.
</p>
of what i see i don't think that this is a normal border radius or even svg i think those are multiple elements desgined like this way
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.box {
width: 230px;
min-height: 100px;
margin: 25px auto;
position: relative;
}
.top {
height: 10px;
background: #000;
width: 85%;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.right {
height: 65%;
background: #000;
width: 10px;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
.bottom {
height: 10px;
background: #000;
width: 85%;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.left {
height: 65%;
background: #000;
width: 10px;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
/* Squares */
.top:before {
content: "";
height: 80%;
background: #000;
width: 8px;
position: absolute;
right:0;
bottom: -40%;
z-index: 99;
transform: translate(85%, 50%)
}
.right:before {
content: "";
height: 8px;
background: #000;
width: 80%;
position: absolute;
right:0;
bottom: -40%;
z-index: 99;
transform: translate(-100%, -230%)
}
.bottom:before {
content: "";
height: 80%;
background: #000;
width: 8px;
position: absolute;
left:0;
bottom: -40%;
z-index: 99;
transform: translate(-90%, -170%)
}
.left:before {
content: "";
height: 8px;
background: #000;
width: 80%;
position: absolute;
right:0;
top: -40%;
z-index: 99;
transform: translate(100%, 230%)
}
</style>
</head>
<body>
<div class="box">
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</body>
</html>
it's not a scalable box it's a box with static width and when change the width you will be need to handle squares to be computable with the new width
i am creating a template for a website. there i want to create a menu like this
I found the below code as a solution
but I can't get the div to divided into 4 parts and add the text in a responsive way. Can do it using position:absolute, but the it is not responsive. How can I achieve this using css in a responsive way?
.background {
background-color: #BCBCBC;
width: 100px;
height: 50px;
padding: 0;
margin: 0
}
.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform: translateY(-20px) translateX(5px) rotate(27deg);
position: absolute;
/* top: -20px; */
}
.line2 {
width: 112px;
height: 47px;
border-bottom: 1px solid green;
-webkit-transform: translateY(20px) translateX(5px) rotate(-26deg);
position: absolute;
top: -33px;
left: -13px;
}
<div class="background">
<div class="line1"></div>
<div class="line2"></div>
</div>
You can use CSS Flexbox & CSS Transform properties to achieve this. Have a look at the snippet below:
body {
padding: 20px;
}
.menu-cover {
width: 360px;
height: 360px;
overflow: hidden;
background: #eee;
}
.menu {
list-style: none;
margin: -70px 0 0 -70px;
padding: 80px;
display: flex;
flex-wrap: wrap;
width: calc(600px - 100px);
height: calc(600px - 100px);
position: relative;
transform: rotate(45deg);
transform-origin: center;
}
.menu:before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background-color: #aaa;
}
.menu:after {
content: '';
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
height: 1px;
background-color: #aaa;
}
.item {
width: 50%;
}
.item a {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
transform: rotate(-45deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="menu-cover">
<ul class="menu">
<li class="item">
Bussiness
</li>
<li class="item">
Team
</li>
<li class="item">
Talent
</li>
<li class="item">
Group
</li>
</ul>
</div>
Hope this helps!
You can use pseudo elements like before and after. Kindly review the updated answer. Hope it is helpful to you.
.background {
background-color: #BCBCBC;
width: 100px;
height: 100px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
}
.background:before {
width: 1px;
height: 500px;
background :red;
-webkit-transform: rotate(45deg);
position: absolute;
content:'';
left: 0;
right: 0;
margin:-200px auto 0;
}
.background:after {
width: 1px;
height: 500px;
background :green;
-webkit-transform: rotate(-45deg);
position: absolute;
content:'';
left: 0;
right: 0;
margin:-200px auto 0;
}
<div class="background">
</div>
Please check the below code. You can implement your requirement in the same way. I have added <span> tags to show the text.
.background {
background-color: #BCBCBC;
width: 100px;
height: 50px;
padding: 0;
margin: 0
}
.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform: translateY(-20px) translateX(5px) rotate(27deg);
position: absolute;
/* top: -20px; */
}
.line2 {
width: 112px;
height: 47px;
border-bottom: 1px solid green;
-webkit-transform: translateY(20px) translateX(5px) rotate(-26deg);
position: absolute;
top: -33px;
left: -13px;
}
<div class="background">
<span style="float:left;padding-left:20%">Business
</span>
<span style="float:left;padding-left:5%">Team
</span>
<span style="float:right;padding-left:5%">Talent
</span>
<span style="float:left;padding-left:20%">Group
</span>
<div class="line1"></div>
<div class="line2"></div>
</div>
https://jsfiddle.net/t3z8q2k4/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Title</title>
</head>
<body>
<div id="container" style=" height: 100px;
width: 100px;
overflow: hidden;
background-color:red;">
<a class="well-link" href="">Test</a>
<div id="triangle-topleft" style="width: 0;
height: 0;
border-top: 100px solid gray;
border-right: 100px solid transparent;">
</div>
</div>
</body>
</html>
I want to create div like the image i have uploaded using CSS /HTML and Jquery
Please help me
I have tried this.. but not able to get text on center
You could simply achieve that by using :after pseudo-element and CSS transform property like this:
.div {
position: relative;
height: 100px;
width: 100px;
overflow: hidden;
background-color: red;
border: 5px solid #000;
color: #fff;
text-align: center;
line-height: 100px;
z-index: -2;
}
.div:before {
content:'';
position: absolute;
left: 20%;
width: 100%;
height: 200%;
background-color: green;
top: 0;
border-left: 5px solid #000;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -1;
}
<div class="div">
<a>1</a>
</div>
Rect with linear gradient
using a single liner gradient you can create this shape.
.rect {
position: relative;
border: 5px solid black;
background-image: linear-gradient(-45deg, firebrick 47%, black 47.5%, black 53%, green 53.5%);
height: 100px;
width: 100px;
}
.rect a {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
font-size: 2em;
color: white;
}
<div class="rect">
<a>1</a>
</div>
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%);
}