0

I am doing website for my friend and now I don't know how to draw something in css.

I want this

I know how to draw this in "AKTUELNO", but I don't know how to create that bottom border that have longer width and skewed sides. Sorry if I didn't explain you very well, but you will understand when you see photo.

I hope you will help me :)

Stefan Kremenovic
  • 1
  • You can try by placing the inverse of this shape (just invert the rotation angle) - http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643 on top of a normal rectangle. Or you should use a SVG. The only other CSS option that comes to mind is the `clip-path` but that has low browser support at present. – Harry Mar 03 '17 at 01:01
  • Looks like you want the `perspective` css3 `transform` https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_perspective1 – Michael Coker Mar 03 '17 at 01:12

1 Answers1

0

My workaround suggestion using gradients:

html {
  height: 100%;
  background-image: linear-gradient(pink, white);
}

*, *::before, *::after {
  box-sizing: border-box;
}

div {
 height: 150px;
 width: 300px;
  margin-left: 50px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

div::before, div::after {
  content: '';
  display: block;
  height: 149px;
  width: 50px;
}

div::before {
  float: left;
  margin-left: -50px;
  background-image: linear-gradient(-71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px),
                    linear-gradient(to top, black, black 1px, transparent 1px);
  
}

div::after {
  float: right;
  margin-right: -50px;
  background-image: linear-gradient(71.5deg, transparent, transparent 47px, black 47px, black 48px, transparent 48px),
                    linear-gradient(to top, black, black 1px, transparent 1px);;
}
<div></div>

And here is my try to adopt the solution that was mentioned by @Harry:

body {
  background: lightblue;
}
.container {
  position: relative;
  width: 75%;
  margin: 0 auto;
  background: rgba(100,100,100,.15);
  height: 300px;
  text-align: center;
  line-height: 300px;
  font-size: 3em;
}
.container::after {
  position: absolute;
  display: block;
  content: '';
  width: 100%;
  height: 95%;
  top: -2.5%;
  padding: 0 50px;
  margin-left: -50px;
  border: 1px solid black;
  -webkit-transform: perspective(50px) rotateX(2deg);
  -moz-transform: perspective(50px) rotateX(2deg);
  transform: perspective(50px) rotateX(2deg);
}
<div class='container'>
  Content Goes Here
</div>

But I think that the robust solution can be achieved by using SVG.

Mike
  • 1,979
  • 2
  • 16
  • 29
  • 1
    @Harry Thank you. – Mike Mar 03 '17 at 01:58
  • I still don't think this is 100% what the OP wants but it is atleast much much more closer than the original answer in my opinion :) – Harry Mar 03 '17 at 01:59
  • 1
    @Harry You are fair, but I'm not pretending for top answer, just giving an idea that can potentially be useful. :) What OP wants already been explained by you in the comment! I can't think of anything else... =\ – Mike Mar 03 '17 at 02:02
  • 1
    I think you can build on my comment and give the same as demo. I wouldn't mind you doing that (and I'd actually upvote you) because in my opinion the thread I linked and this one are not 100% dupes, so a new answer to this question is completely justified :) – Harry Mar 03 '17 at 02:05
  • 1
    @Harry Got it, thank you. Will take a look after sleep, haha. :) Without transparent background would be a way easier, just can use borders or something... – Mike Mar 03 '17 at 02:08