How to Draw a Trapezoid-Like Card

how to draw a trapezoid-like card?

Here is an idea using one element and pseudo element with a small SVG filter to round the edges:

.box {
  width: 250px;
  height: 150px;
  margin:50px 20px;
  position: relative;
  background: red;
  filter: url('#goo')
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  height: 30px;
  width: 25%;
  background: inherit;
}

.bottom:before {
  top: 100%;
  right: 0;
}
.bottom:after {
  top: 100%;
  left:50%;
  border-radius:0 0 0 20px;
  transform-origin:top;
  transform:skew(8deg);
}

.top:before {
  bottom: 100%;
  left: 0;
}
.top:after {
  bottom: 100%;
  right:50%;
  border-radius:0 20px 0 0;
  transform-origin:bottom;
  transform:skew(8deg);
}

<div class="box bottom"></div>
<div class="box top"></div>

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

Draw a trapezoid

try this code

      <Grid >
        <StackPanel x:Name="stk">
             <Path Data="M15,0 L60,0 75,30 0,30 z" Height="120" Stretch="Fill" Stroke="Black"  Width="300"/>
        </StackPanel>
    </Grid>

How can I create a slanted trapezoid like navigation bar

There's no easy way to get slanted sides to a CSS-styled element. But there are a few tricks you can utilize:

• Use Bitmap-images for the tabs or the tab sides. This is the "classic" way, the way the problem used to be solved. It also allows for even more complex tab sides.
• Use SVG-images, (see this tutorial) either inline or external. This has many of the advantages of Bitmap-images,and in addition to that, your page still scales
• Use rotated elements. Css allows for rotation of elements. You can draw just about everything this way. Somebody even designed a font this way. An example of using 3d transforms to create slanted tabs can be found here.

If you want quick-and-dirty, take the first option.

Creating a trapezium in CSS and/or HTML

you could do this "by hand"
html:

<canvas id="polygon" />

javascript

var polygon = document.getElementById('polygon').getContext('2d');
polygon.fillStyle = '#f00';
polygon.beginPath();
polygon.moveTo(0, 0);
polygon.lineTo(90,50);
polygon.lineTo(70, 70);
polygon.lineTo(0, 90);
polygon.closePath();
polygon.fill();

this doesn't make shure it's convex and it has no parallel lines. You have to put in the correct coordinates.

Fiddle: http://jsfiddle.net/8t4rZ/

Style input field to look like a trapezium

Something like this:

<span class="outer">
  <span class="inner">
    <input type="text" value="test value" />
  </span>
</span>

.outer {
    display: inline-block;
    border-bottom: 34px solid #000;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0px;
}

.inner {
    display: inline-block;
    margin: 1px -18px -40px -18px;
    border-bottom: 32px solid white;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    height: 0px;
}

input
{
    background: transparent;
    border: none;
    display: inline-block;
    font-size: 130%;
}

http://jsfiddle.net/fNCt4/4/

The input itself doesn't contribute to the shape. It's only those two spans. You could use the input element itself for the inner shape, but since you need to add markup anyway, I think you might as well add two 'generic' trapezoid helper shapes and leave the input element untouched.

You'll need two to fake the border. This is needed, because the shape itself is created by adding a border, so the visible border is constructed by overlaying a slightly smaller shape onto the other.

The rest is tricks with negative margins to allow the inner shape to be positioned over the border of the outer shape. And of course using transparent as a color, to prevent the 'negative space' of the inner shape to overwrite the outer shape.

Is it possible to achieve a folder-shape div container using CSS

Here's a snippet pretty close to your needs. Note, it uses a clip-path: path('...') which is not supported by Opera atm. If Opera needs to be supported, the exact effect might be achieved only using external image. Without it border-radius for pseudo element can produce only a close look. Not sure if it is close enough. Also note, that the path itself is determined by static points coordinates, what might be unwanted. In such a case it might be generated by some JS.

<div class="folder"></div>

.folder{

  width: 420px;
  height: 310px;
  margin: 10em auto 10em;

  border-radius: 5px 25px 25px 25px;
  filter: drop-shadow(0 0 0.75rem grey);

  background: white;
  position: relative;
}

.folder::before{
    content:  '';
    position: absolute;
    top: -18px;
    width: 200px;
    height: 25px;
    background: white;
    border-radius: 25px 0 0 0;
    clip-path: path('M 0 0 L 160 0 C 185 2, 175 16, 200 18 L 0 50 z');
}
.folder::after{
  content: '';
  position: absolute;
  left:  40px;
  width: 85px;
  height: 5px;
  top: -18px;
  background: #7036E9;
  border-radius: 0 0 5px 5px;

}

Responsive CSS Trapezoid Shape

There are many different ways to create the trapezoid shape and each have their own benefits and downfalls.

Below is a comprehensive list of the various ways and all should be responsive.

CSS Border

The most well supported of all the answers. It is supportwed way back to IE and across all other browsers both on the desktop and mobile.

• border - CSS | MDN

#trapezoid {

  border-left: 20vw solid red;

  border-top: 5vw solid transparent;

  border-bottom: 5vw solid transparent;

  width: 0;

  height: 10vw;

}

<div id="trapezoid"></div>

How we make Imageview like Trapezium

func addDiamondMask(to view: UIView)
        {

        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0))
        path.addLine(to: CGPoint(x: view.bounds.width, y: 0))
        path.addLine(to: CGPoint(x: self.view.bounds.width, y: self.view.bounds.height/2 - 60))
        path.addLine(to: CGPoint(x: 0, y: view.bounds.size.width - 85)) 
        path.close()

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = path.cgPath
        shapeLayer.fillColor = UIColor.white.cgColor
        shapeLayer.strokeColor = UIColor.gray.cgColor
        view.layer.mask = shapeLayer
    }

usage : addDiamondMask(to: imageView)

---

Related Topics