I use borderRadius: BorderRadius.circular(16), to make borders circular, but is there a builtin way to add it a pointy end ?
More explanation:
I have this dart code,
child: Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.grey,
borderRadius: BorderRadius.circular(16),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
margin: EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: Text(
'uz 01 BB 222 B',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
margin: EdgeInsets.only(bottom: 8),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: Text(
'uz 01 CC 333 C',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 8, horizontal: 16),
decoration: BoxDecoration(
color: Colors.lightGreenAccent,
borderRadius: BorderRadius.circular(16),
),
child: Text(
'+ Login account',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
],
),
),
Which looks like this
But I want it to have a pointy end, similar to this picture,
You could use the css property clip-path.
Easiest way would be to put another div with a set height above your div here. And then clip-path the shape of the triangle at the end. I’d suggest using the polygon function with it: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path