Skip to content Skip to sidebar Skip to footer
Home / Css / Css Shapes / Html

Css Rectangle That Has Triangle In The Border

Post a Comment
I want to make a Rectangle In css , I want to make a triangle in the border of this Rectangle, but i don't know how to do it . I need a Css code to make this : How to do it in C

Solution 1:

take this demo

<style>.rect {
            background: red;
            height: 50px;
            width: 150px;
            position: relative;
            overflow: hidden;
        }
        .rect:after {
            content: "";
            background: #fff;
            height: 50px;
            width: 50px;
            -moz-transform: rotate(45deg); 
            -ms-transform: rotate(45deg); 
            -webkit-transform: rotate(45deg); 
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            display: block;
            position: absolute;
            top:-35px;
            right: -25px;

        }
    </style></head><body><divclass="rect"></div>

Solution 2:

I think you are looking for clip-path: polygon() and give it the coords to clip... Read more here: http://www.html5rocks.com/en/tutorials/masking/adobe/

Solution 3:

There's multiple ways to do this, you can use before and after css pseudos or you can use clip-path like mentioned from hannesr.

CSS before

.rect{
  width:200px;
  height:200px;
  background:#f00;
  position:relative;
}
.rect:before{
  content:'';
  border-left:60px solid transparent;
  border-right:20px solid transparent;
  border-top:20px solid #fff;
  position:absolute;
  top:0;
  right:-20px;
}

CSS Clip-Path

.rect2{
width:200px;
clip-path: polygon(0px200px,20px200px,10px10px,40px40px);
-webkit-clip-path:polygon(0px200px,20px200px,10px10px,40px40px);
height:200px;
background:#0f0;
position:relative;
}

Using clip-path different ways is fun, but remember it's like using the SVG so you need to know your coords. If you read anything read http://www.html5rocks.com/en/tutorials/masking/adobe/ which hannesr posted, it's very informative, and a lot of the html5 rocks website has great content.

CSS border-image

-webkit-border-image: url(border.png) 3030 round; /* Safari */
-o-border-image: url(border.png) 3030 round; /* Opera */border-image: url(border.png) 3030 round;

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-image

To try out the before and the clip-path follow this link http://jsfiddle.net/2KTVX/

Also for browser compatibility for each of these please follow one of these links

pseudo support

Transform 2D

Border Image

Solution 4:

CSS3 linear-gradient() can draw this background:

HTML:

<div></div>

Necessary CSS:

div {
  background: linear-gradient(-135deg, transparent 40px, red 40px);
}

Output Image:

Output Image

body {
  background: linear-gradient(lightgreen, green);
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(-135deg, transparent 40px, red 40px);
  height: 150px;
  margin: 20px;
  width: 400px;
}
<div></div>

Post a Comment for "Css Rectangle That Has Triangle In The Border"