In this article I'm going to show you how to create creative shapes for a list section in your Squarespace website in version 7.1 you'll find this list section under the people layouts inside your Squarespace website what we're going to do is create unique shapes for the individual cards now all the codes I'm about to share are listed in the description below but we've got a lot of options to cover so let's hop on into Squarespace and I'll show you how these codes work here.
============================================
link source : https://insidethesquare.co/squarespace-tutorials/list-item-shapes
This first one is for curving the corners of the list item card.
-------------------------
.list-item {
border-radius: 25%
}
This version only curves some of the corners. Play around with the values, trying percentage or other combinations of numbers!
-------------------------------
.list-item{
border-radius: 35px 0
}
This code creates the parallelogram:
---------------------------
.list-item{
clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
}
This code changes the shape of the first and last list item on desktop:
-------------------------------
@media only screen and (min-width:640px){
.list-item:first-of-type{
border-radius: 35px 0 0 35px !important
}
.list-item:last-of-type{
border-radius: 0 35px 35px 0 !important
}
}
0 Comments