Css Skew Element and Get Inner Rounded Border Top

css skew element and get inner rounded border top

I would do it like this:

.header {  border-top: 20px solid blue;  height:100px;  position: relative;  overflow: hidden;}.header:before,.header:after {  content: "";  vertical-align:top;  display: inline-block;  transform-origin: top right;  transform: skew(-40deg);}
.header:before {  height: 100%;  width: 50%;  border-radius: 0 0 20px 0;  background: blue;}
.header:after {  height: 20px;  width: 20px;  margin-left:-1px;  background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);}

/*to illustrate different values of skew*/.header:before,.header:after {  animation:change 2s linear infinite alternate;}
@keyframes change{  from{transform: skew(0deg);}  top{transform: skew(-40deg);}}

<div class="header"></div>

Skew One Corner And Add Border Radius To Opposite Corner

Something like this but still hard to master. I would consider using an image.

span {
    border: 2px dashed blue;
    border-radius: 8px 0px 8px 0px;
    padding: 6px;
    font-size: 18px;
    display: inline-block;
    background:#0CF;
    position:relative;
    box-sizing: border-box
}
span:after{
      content:"";
      width: 15px;
      height:90%;
      position:absolute;
      right:-8px;
      top:-2px;
      background:#0CF;
       transform: skewX(-20deg);
       border-top: 2px dashed blue;
       border-right: 2px dashed blue;
       box-sizing: border-box
}

<span>Shift top-right corner</span>

Make an element rotated & overflow to top + rounded inside border

Sample Image
Possibly something like this?

body {
  overflow: hidden;
}

.wrapper {
 background-image: linear-gradient(
    to right,
    #00dbde,
    #00cfff,
    #00b8ff,
    #6a8cff,
    #fc00ff
  );
  height: 800px;
  width: 100%;
}

.banner {
  color: #35C222;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 16px;
  background: black;
  border-radius: 50px;
  border: 30px solid white;
  height: 70%;
  width: 100%;
  font-family: "Source Code Pro";
  transform: rotate(-30deg);
  margin-top: -300px;
}

.frontend {
  font-size: 70px;
  margin-bottom: 0;
  margin-left: 100px;
}

.time {
  transform-origin: bottom left;
  transform: rotate(90deg) translate(-80%);
}

<div class="wrapper">
      <div class="banner">
        <p class="time">{time.format("MMMM Do YYYY, h:mm:ss")}</p>
        <p class="frontend"> < SPE / Frontend > </p>
      </div>
</div>

CSS custom the trapezoid with inverted border radius

You can use something like this:

div {  border-top: solid 1px #06f;  margin: 1rem;  padding: 0;  border-radius: .2em 0 0 .2em;  overflow: hidden;  font-size: 2rem;}
h1 {  display: inline-block;  margin: 0 0 0 -1em;  padding: 0 1em 0 2em;  line-height: 1.4;  border-radius: 0 0 .2em 0;  background: #06f;  transform: skewX(-25deg);  font-size: inherit;  font-weight: 500;}
span:before,span:after {  content: '';  position: absolute;  width: .4em;  height: .4em;  background: #06f;  right: -1.57em;  border-radius: 0 0 .2em 0;}
span:after {  width: .5em;  height: .5em;  transform: skewX(-25deg);  border-radius: .2em 0 0;  background: #fff;  right: -1.7em}
span {  position: relative;  display: inline-block;  color: #fff;  transform: skewX(25deg);}

<div>  <h1><span>Header</span></h1></div><div>  <h1><span>Header with a short text</span></h1></div><div>  <h1><span>Header with a long long long text</span></h1></div>

Skew div border of one side only using one div only

I believe this is what you want:

http://jsfiddle.net/5a7rhh0L/3/

CSS:

#a {
    position: relative;
    width: 120px;
    padding: 10px 20px;
    font-size: 20px;
    position: relative;

    color: #2E8DEF;
    background: #333333;
    border-bottom: 3px solid #2E8DEF;
}
#a:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;

    background: #333333;
    border-bottom: 3px solid #2E8DEF;
    border-right: 20px solid #2E8DEF;

    transform-origin: bottom left;
    -ms-transform: skew(-30deg, 0deg);
    -webkit-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}

How makes a diagonal border in css in three parts

This is quite a tricky one. The hard part is to connect the path. With my pure CSS solution below you have to fine-tune the result, I am afraid.

You may want to consider creating an SVG instead.

With an SVG

.container {
  width: 400px;
  height: auto;
}

.lines {
  stroke: #888888;
  stroke-width: 1px;
  stroke-opacity: 1;
  fill: none;
}

<div class="container">
  <svg class="lines" viewbox="0 0 400 100" preserveAspectRatio="xMidYMin">
    <path d="M 0 99 A 150 10 0 0 0 200 90 M 199.8 90 L 220 1 M 220 1 H 400 M 400 1 Z" />
  </svg>
</div>

how to apply rounded border to only left side of element

Use border-top-left-radius and border-bottom-left-radius

.div{
margin-top:40px;
  width:50px;
  height:10px;
  border-radius:50px;
  background:red;
  transform:rotateZ(90deg);
}

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

Round the arrow from inner side

Try using the :before and :after selectors instead. Fiddle: http://jsfiddle.net/gopal/tvfujcLp/1/

#arrow {    width:130px;    height:130px;    transform: rotate(-45deg);    margin-top:40px;    position:relative;}
#arrow:after, #arrow:before {    content:'';    display:block;    height:30px;    width:100%;    position:absolute;    background:black;    bottom:0;    border-radius:1em;}#arrow:after {    right:0;    width:30px;    height:100%;}

<div id="arrow"></div>

Css Skew Element and Get Inner Rounded Border Top