Вопрос:
Как я могу сделать css следующим образом:
Ответ №1
Для этого можно использовать псевдоэлемент:
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>
Затем вы можете играть с параметрами высоты и ширины псевдоэлемента, чтобы “растянуть” линию. Обратите внимание: это может потребовать небольших корректировок для верхних и левых свойств для позиционирования
Ответ №2
Может быть достигнуто с помощью манипулирования радиусом границы
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/
Ответ №3
Измените высоту согласно требованиям!
Вы можете играть с параметрами в соответствии с вашими потребностями!
.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>Ответ №4
Стрелка в 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: