Jump to content

Adding Border To Complex Shape

Recommended Posts

Hi! I am trying to create a timeline with the list section. I have it so that the cards are in a speech bubble shape and I would like it to be rounded and have a border around it. I have achieved this, however, the rounding and border is not wrapping around the entire shape. Is there a way I can accomplish that? Here is the code I'm using:

/*section the timeline is in*/
section[data-section-id="6401594d591d0d1f2e82e00f"]{
	/*cards*/
	.list-item{
		clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 10% 90%, 0 100%);
		padding-bottom:4.5rem!important;
		background-color:#F1EFED;
		border:3px solid #656565;
		border-radius:20px;}
/*These are not related to the cards, but I am listing it in case it is relevant*/
	/*arrow shape*/
	.user-items-list-carousel__arrow-icon-path {
		stroke-width: 5px;
		stroke: #33bddd;}
	/*arrow background*/
	.user-items-list-carousel__arrow-icon-background-area {
		background: #F1EFED;
		opacity: 1!important;}
	/*arrow border*/
	.user-items-list-carousel__arrow-button {
		border:2px solid #656565;}
	/*line bubbles are sitting on*/
	.user-items-list-carousel__gutter{
		border-bottom:3px dashed #F1EFED;}}

Here is what it looks like:image.thumb.png.8f1deb9aa83e3fc7d749cc62505152d7.png

The bottom doesn't have that border and isn't rounded like the rest of the shape. Does anyone know a way to achieve this? Thanks so much in advanced for the help!

website: https://www.yoloyoli.art/about

password: forum

Link to comment
  • Replies 2
  • Views 254
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.