Oblique or twisted border shape

Content Index :

Oblique or twisted border shape
Css border bug - oblique rendering
What is causing this oblique border issue?
Shape oblique bottom border of a div
Draw line with oblique border
CSS - Oblique border without filling

Oblique or twisted border shape

Tag : html , By : nd27182

Date : November 23 2020, 01:01 AM

To fix this issue Most easiest and neat solution would be to use svg to create the border.

#container {
  position: relative;
  width: 200px;
  height: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

<div id="container">
  <svg width="200" height="30" viewBox="-1 -2 201 33">
    <path d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-width="2" fill="none" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

#container {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

<div id="container">
  <svg width="200" height="30" viewBox="-1 -1 201 33">
    <path d="M0,0 h200 q-20,15 0,30 h-200 q20,-15 0,-30" stroke="black" stroke-linejoin="round" stroke-width="2" fill="none" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

<div id="container">
  <svg width="200" height="30" viewBox="-1 -1 201 33">
    <path d="M0,0 h200 q0,10 -15,15 q10,0 15,15 h-200 q0,-10 15,-15 q-10,0 -15,-15" stroke="black" stroke-linejoin="round" stroke-width="2" fill="none" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

<div id="container">
  <svg width="200" height="30" viewBox="-1 -1 201 33">
    <path d="M0,0 h200 q-10,0 -15,12.5 l15,2.5 l-15,2.5 q0,10 15,13 h-200 q10,0 15,-12.5 l-15,-2.5 l15,-2.5 q0,-10 -15,-12.5" stroke="black" stroke-linejoin="round" stroke-width="2" fill="none" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

#container {
  position: relative;
  width: 200px;
  height: 30px;
  margin-bottom: 30px;
}
#content {
  text-transform: uppercase;
  position: absolute;
  width: 200px;
  height: 30px;
  top: 0;
  text-align: center;
  line-height: 30px;
}

<div id="container">
  <svg width="205" height="35" viewBox="-1 -1 205 38">
    <filter id="f">
      <feGaussianBlur stdDeviation="1.5" />
    </filter>
    <path filter="url(#f)" d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-linejoin="round" stroke-width="2" transform="translate(0,3)" fill="black" />
    <path id="shape" d="M0,0 h200 l-15,15 l15,15 h-200 l15,-15z" stroke="black" stroke-linejoin="round" stroke-width="2" fill="white" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

<div id="container">
  <svg width="205" height="35" viewBox="-1 -1 205 38">
    <path filter="url(#f)" d="M0,0 h200 q0,10 -15,15 q10,0 15,15 h-200 q0,-10 15,-15 q-10,0 -15,-15" stroke="black" stroke-linejoin="round" stroke-width="2" transform="translate(0,3)" fill="black" />
    <path d="M0,0 h200 q0,10 -15,15 q10,0 15,15 h-200 q0,-10 15,-15 q-10,0 -15,-15" stroke="black" stroke-linejoin="round" stroke-width="2" fill="white" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

<div id="container">
  <svg width="205" height="35" viewBox="-1 -1 205 38">
    <path filter="url(#f)" d="M0,0 h200 q-10,0 -15,12.5 l15,2.5 l-15,2.5 q0,10 15,13 h-200 q10,0 15,-12.5 l-15,-2.5 l15,-2.5 q0,-10 -15,-12.5" stroke="black" stroke-linejoin="round" stroke-width="2" transform="translate(0,3)" fill="black" />
    <path d="M0,0 h200 q-10,0 -15,12.5 l15,2.5 l-15,2.5 q0,10 15,13 h-200 q10,0 15,-12.5 l-15,-2.5 l15,-2.5 q0,-10 -15,-12.5" stroke="black" stroke-linejoin="round" stroke-width="2" fill="white" />
  </svg>
  <div id="content">lorem ipsum</div>
</div>

div {
  position: relative;
  text-transform: uppercase;
  width: 200px;
  height: 30px;
  text-align: center;
  line-height: 27px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  box-sizing: border-box;
}
div:after,
div:before {
  position: absolute;
  content: '';
  width: 21.21px;
  height: 21.21px;
  border-top: 3px solid black;
  border-right: 3px solid black;
  transform: rotate(45deg);
  box-sizing: border-box;
  top: 1px;
  left: -9px;
}
div:after {
  border-right: 0;
  border-left: 3px solid black;
  left: 100%;
  margin-left: -10px;
  transform: rotate(-45deg);
}

<div>lorem ipsum</div>

Comments

No Comments Right Now !

Boards Message :

You Must Login Or Sign Up to Add Your Comments .

Share :

Tags :

Oblique or twisted border shape , Shape oblique bottom border of a div , Css border bug - oblique rendering , CSS - Oblique border without filling , oblique shape ,

Css border bug - oblique rendering

Tag : css , By : mediafarm

Date : March 29 2020, 07:55 AM

I hope this helps . This is not a bug its how the browsers choose to render the border.
See this example I mocked up. http://jsfiddle.net/blowsie/Uss7X/

What is causing this oblique border issue?

Tag : html , By : Bharath

Date : March 29 2020, 07:55 AM

like below fixes the issue Easy way: Another container
You can't do this with traditional HTML borders as they work at shown above (that's how CSS triangles work!). The easiest way to get this effect is to wrap the element in another container.

<div class="container">
    <div class="inner-container">
        ...
    </div>
</div>

.container {
    border-top:10px solid red;
    border-bottom:10px solid red;
}

.inner-container {
    border-left:10px solid blue;
    border-right:10px solid blue;
}

<div class="container">
    ...
</div>

.container {
    border-top:10px solid red;
    border-bottom:10px solid red;
    position:relative;
    /* pad out the left and right to allow room for the border */
    padding:0 10px;
}

.container:before,
.container:after {
    position:absolute;
    top:0;
    bottom:0;
    width:10px;
    background-color:blue;
    display:block;
    content:"";
}

.container:before {
    left:0;
}

.container:after {
    right:0;
}

Shape oblique bottom border of a div

Tag : html , By : Al Dimond

Date : March 29 2020, 07:55 AM

help you fix your problem I'm building a simple website, and on its landing page I need two backgrounds. For that, I'm using two divs, one on top of the other. So far so good. , Not the best way to do this

.second {
    width:500px;
    height:300px;
    transform:skewY(20deg);
    background:orange;
    margin-top:-100px;
    border:2px solid green;
}

.holder{
    width:500px;
    height:800px;
    background:grey;
}

.second p{
    position:absolute;
    margin-top:200px;
    transform:skewY(-20deg);
}

<div class="holder">
    <div class="second"><p>Div 1</p></div>
</div>

Draw line with oblique border

Tag : ios , By : ThF

Date : March 29 2020, 07:55 AM

With these it helps How to draw line with oblique border like this: , I use CAShapeLayer:

class TriangleView: UIView {

    override func awakeFromNib() {
        super.awakeFromNib()
        self.contentMode = UIViewContentMode.redraw
    }

    override func draw(_ rect: CGRect) {
        let mask = CAShapeLayer()
        mask.frame = self.layer.bounds

        let width = self.layer.frame.size.width
        let height = self.layer.frame.size.height

        let path = CGMutablePath.init()

        path.move(to: CGPoint(x: width, y: 0))
        path.addLine(to: CGPoint(x: width, y: height))
        path.addLine(to: CGPoint(x: 0, y: height))
        path.addLine(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: 0, y: 50))

        mask.path = path

        self.layer.mask = mask

        let shape = CAShapeLayer()
        shape.frame = self.bounds
        shape.path = path
        shape.lineWidth = 3.0
        shape.strokeColor = UIColor.white.cgColor
        shape.fillColor = UIColor.white.cgColor

        self.layer.insertSublayer(shape, at: 0)
    }


}

CSS - Oblique border without filling

Tag : html , By : DicksGarage

Date : March 29 2020, 07:55 AM

seems to work fine I found a more elegant way, that's more easier to maintain, based on this answer: https://stackoverflow.com/a/24691352/5287860.
New code:

<div class="row">
    <div class="arrow">
        <div><span id="">30 mins</span></div>
        <img src="assets/up_arrow.png" />
    </div>
</div>

.row {
    display: block;
    overflow: hidden;
    background: linear-gradient(to right, #fff, transparent, #fff, #fff);
}
.arrow {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    padding: 5px 0 5px 5px;
    border-style: solid;
    border-width: 1px 0px 1px 1px;
    border-color: #929A9D transparent #929A9D #929A9D;
    transform: skewX(-20deg);
    -ms-transform: skewX(-20deg);
    -webkit-transform: skewX(-20deg);
    width: 100px;
}
.arrow > div {
    display: inline-block;
    text-decoration: none;
    transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
}
.arrow > img {
    vertical-align: middle;
    width: 12px;
    height: 12px;
    text-decoration: none;
    transform: skewX(20deg);
    -ms-transform: skewX(20deg);
    -webkit-transform: skewX(20deg);
}