CSS3 Floating Boat - Snippet

Preview
HTML
CSS
JS

<div class="whatever"><div class="yourboat"></div></div>

/* The Code */

body{
    margin:0 auto;
    background:#DBE6E2;
}

.whatever .yourboat {
    float:left;
}

.whatever {
    width:340px;
    height:250px;
    background:white;
    border-radius:50px;
    padding-left:30px;
	margin: 50px auto;
}

.yourboat {
    width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 100px solid transparent;
    border-top: 40px solid #BB482B;
    top:70%;
    position:relative;
}

.yourboat::before{
    content:"";
    display:block;
    position:relative;
    top:-150px;
    right:90px;
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 0px solid transparent;
    border-bottom: 100px solid #fccf3c;
}

.yourboat::after{
    content:"";
    display:block;
    position:relative;
    bottom:270px;
    right:10px;
    width: 0;
    height: 0;
    border-left: 0px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 120px solid #fccf3c;
}