Как мога да направя CSS извита линия?

Как мога да направя css като този на снимката по-долу:

въведете описание на изображението тук


css css-shapes
person dev.knockout    schedule 05.05.2015    source източник

Отговори (4)


arrow_upward
5
arrow_downward

Може да се постигне чрез манипулиране на радиуса на границата

CSS

.graph {
    height: 100px;
    width: 200px;
    background: transparent;
    border-radius: 0px 0px 0px 370px/225px;
    border: solid 5px grey;
    border-top:none;
    border-right:none;
    margin:20px;
}

.graph:before {
    height:20px;
    width: 10px;
    border: 5px solid grey;
    border-radius: 30px 30px 0px 0px /75px 75px 0px 0px ; 
    display: block;
    content: "";
    border-bottom:none;
    position:relative;
    top: -9px;
    left: -12px;
}

HTML

<div class = "graph"><div>

https://jsfiddle.net/u663m81s/

person Ranjith    schedule 05.05.2015
comment
Този отговор е брилянтен хаха +1 - person Robert Pounder; 27.04.2017

arrow_upward
4
arrow_downward

Можете да използвате псевдо елемент за това:

div {
  height: 300px;
  width: 300px;
  background: lightgray;
  position: relative;
  border-bottom: 5px solid black;
  border-right: 5px solid black;
}
div:after {
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  border: 3px solid transparent;
  border-bottom-color: black;
  top: -5px;
  left: 50%;
  border-radius: 50%;
  transform: rotate(45deg);
}
<div></div>

След това можете да си поиграете със свойствата на височината и ширината на псевдо елемента, за да „разтегнете“ линията. Моля, обърнете внимание: това може да изисква малки корекции на горните и левите свойства за позициониране

person jbutler483    schedule 05.05.2015

arrow_upward
3
arrow_downward

Променете височината според изискванията!

Можете да играете с параметри, които отговарят на вашите нужди !!

.box{
  width:100px; height:80px;  
  border:solid 3px #000;
  border-color:transparent transparent #000 #000;
  border-radius: 0px 0px 0px 250px;
}
<div class="box"></div>

person PrakashSharma    schedule 05.05.2015

arrow_upward
3
arrow_downward

Стрелка в css, от css-tricks.com/ShapesOfCSS

#curvedarrow {
  position: relative;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-right: 9px solid red;
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  -o-transform: rotate(10deg);
}
#curvedarrow:after {
  content: "";
  position: absolute;
  border: 0 solid transparent;
  border-top: 3px solid red;
  border-radius: 20px 0 0 0;
  top: -12px;
  left: -9px;
  width: 12px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}
<div id="curvedarrow"></div>

Като алтернатива можете да използвате SVG: http://codepen.io/gaelb/pen/mJePGM

person Gaël    schedule 05.05.2015