How to Make One Side of a Div Pointy with CSS

How to make one side of a div pointy with CSS?

Having thought about it more, this is a more elegant solution that allows much more effective styling and the use of just one HTML element. Using this method, we can achieve the results in your concept completely.

HTML

<a href="#" class="button">Back</a>

CSS

a.button {
    text-decoration:none;
    color:#111;
    text-shadow:0 1px 0 #fff;
    font-weight:bold;
    padding:10px 10px;
    font-size:14px;
    border-radius:0 8px 8px 0;
    -webkit-border-radius:0 8px 8px 0;
    float:left;
    margin-left:30px;
    margin-top:20px;
    position:relative;
    font-family:verdana;
    color:#3b3d3c;
    border:1px solid #666;
    border-left:0;
    background: -moz-linear-gradient( top , #eee 0%,#bbb 100%);
    background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%);  
}
a.button:after {
    content:"";
     width:25px;
     height:25px;
     background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%);
     background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%);
     -moz-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     display:block;
     position:absolute;
     top:5px;
     left:-14px;
     z-index:-1;
     border:1px solid  #666;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
    border-left:0;
    left:-13px;
}

The last rule is for Chrome, which otherwise renders the result slightly differently.

Hope this helps.

putting a point on the right side of a div

If you use position: absolute, it will position the element within the nearest parent which is either position: relative or absolute. In your case, .sml-title has neither of those properties, so .sml-title:after is not positioned within .sml-title.

If you want your ::after pseudoelement to be positioned within .sml-title, you'll need to add position: relative or absolute to .sml-title

Creating a div with a pointed side

Here is a version using transform: rotate

/*Down pointing*/.triangle-down {  background: white;  display: inline-block;  height: 125px;  margin-left: 20px;  margin-bottom: 55px;  position: relative;  width: 200px;  cursor: pointer;  border: red solid 2px;}img {  position: relative;  margin: 10px;  z-index: 1}.triangle-down:before,.triangle-down:after {  border-bottom: 2px solid red;  background: white;  content: '';  height: 50px;  left: 5px;  position: absolute;  top: 98px;  width: 54%;  transform: rotate(22deg);  z-index: 0;}.triangle-down:after {  left: auto;  right: 5px;  transform: rotate(-22deg);}

<div class="triangle-down">  <img src="http://placehold.it/180x105"></div>

Display pointer on left side of the div

Change CSS to code like:

.callout.top::before {
    border-right: 11px solid #444;
    bottom: 10px;
    left: -20px;
}

Example:

body {  font-family: Helvetica;  font-size: 13px;}div.callout {  height: 20px;  width: 130px;  /*float: left;*/  z-index: 1;}div.callout {  background-color: #444;  background-image: -moz-linear-gradient(top, #444, #444);  position: relative;  color: #ccc;  padding: 20px;  border-radius: 3px;  box-shadow: 0px 0px 20px #999;  //margin: 25px;  min-height: 20px;  border: 1px solid #333;  text-shadow: 0 0 1px #000;  /*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/}.callout::before {  content: "";  width: 0px;  height: 0px;  border: 0.8em solid transparent;  position: absolute;}.callout.left::before {  left: 0%;  right: -20px;  top: 40%;  border-left: 10px solid #444;}.callout.top::before {  border-right: 11px solid #444;  bottom: 10px;  left: -20px;}.callout.bottom::before {  left: 45%;  top: -20px;  border-bottom: 10px solid #444;}.callout.right::before {  top: 40%;  border-right: 10px solid #444;}.callout.top-left::before {  /*left: 7px;*/  bottom: -20px;  border-top: 10px solid #444;}.callout.top-right::before {  /*right: 7px;*/  bottom: -20px;  border-top: 10px solid #444;}

<div class="callout top">test</div>

div with rounded sides and pointy corners

like tv screen

#tv {
  position: relative;
  width: 200px;
  height: 150px;
  margin: 20px 0;
  background: red;
  border-radius: 50% / 10%;
  color: white;
  text-align: center;
  text-indent: .1em;
}
#tv:before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: -5%;
  left: -5%;
  background: inherit;
  border-radius: 5% / 50%;
}

FIDDLE: http://jsfiddle.net/arjun_chaudhary/LBaNY/

how to make divs bottom pointy like in this image

You can use clip-path to clip an element to the desired shape. This tool is amazing to fiddle around to get the exact shape you want.

div#hero-banner {  margin-top: -60px;  max-height: 600px;  height: 60vh;  min-width: 100%;  background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));  background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));  background: url('http://finedininglovers.cdn.crosscast-system.com/ImageAlbum/6830/original_001.jpg') no-repeat, moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));  background-blend-mode: overlay;  background-size: cover;  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 18% 100%, 0 90%);  clip-path: polygon(0 0, 100% 0, 100% 90%, 18% 100%, 0 90%);}

<div id="hero-banner">
</div>

CSS - How to make rectangle with pointed sides?

The trick is to use the pseudo classes :before and :after. Try it like this:

.yourButton {
    position: relative;
    width:200px;
    height:40px;
    margin-left:40px;
    color:#FFFFFF;
    background-color:blue;
    text-align:center;
    line-height:40px;
}

.yourButton:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-right:40px solid blue;
    border-bottom:20px solid transparent;
}

.yourButton:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:40px solid blue;
    border-bottom:20px solid transparent;
}

JsFiddle: http://jsfiddle.net/VpW5x/

Sharp one side corner

You could achieve that with css :before pseudo-elements like this:

div:before {  content: "";  width: 0px;  height: 0px;  border-style: solid;  border-width: 0px 40px 40px 0px;  border-color: transparent #44d2ff transparent transparent;  position: absolute;  top: 0px;  margin-left: -40px;}
div {  position: relative;  left: 100px;  width: 200px;  height: 40px;  background: #44d2ff;}

<div></div>

Cut Corners using CSS

If the parent element has a solid color background, you can use pseudo-elements to create the effect:

div {    height: 300px;    background: red;    position: relative;}
div:before {    content: '';    position: absolute;    top: 0; right: 0;    border-top: 80px solid white;    border-left: 80px solid red;    width: 0;}

<div></div>

---

Related Topics