我想使用css从I hate tomatoes logo创建切片效果。
基本上我想提供一个图像源作为链接，png，svg或其他什么，我想得到这个切片效果。我怎样才能做到这一点？
虽然我只能获得应该切片图像的线条。 以下是我为此所做的事情：
h1, div, p {
margin: 0;
padding: 0;
}
.v-banner {
padding: 48px;
background: #4e54c8;
background: -webkit-linear-gradient(120deg, #21d4fd, #4e54c8);
background: linear-gradient(120deg, #21d4fd, #4e54c8);
box-shadow: -15px 0 15px -16px rgba(0, 0, 0, 0.4) inset;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.v-banner > div {
width: 25%;
margin: 4px;
transform: rotateZ(-30deg);
color: #fff;
border-image-source: radial-gradient(circle at 50%, white, transparent);;
border-image-slice: 1;
display: flex;
justify-content: center;
}
.v-banner > div:first-child {
border-bottom: 1px solid #fff;
}
.v-banner > div:last-child {
border-top: 1px solid #fff;
}<div class='v-banner'>
<div></div>
<div></div>
</div>
更新
在搜索，学习和编码剪辑路径属性后，我做到了。我希望它能帮助那些开始使用CSS3的人。
.v-banner {
width: 50%;
background: #4e54c8; /* fallback for old browsers */
background: -webkit-linear-gradient(120deg, #21d4fd, #4e54c8); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(120deg, #21d4fd, #4e54c8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
box-shadow: -15px 0 15px -16px rgba(0, 0, 0, 0.4) inset;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.v-banner > div {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.logo {
height: 72px;
fill: #fff !important;
margin-bottom: 8px;
}
.logo > svg {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
transition: 0.2s ease-in;
}
.logo:hover > svg:first-child {
margin-right: 0 !important;
padding-right: 0!important;
}
.logo:hover > svg:last-child {
margin-left: 0 !important;
padding-left: 0 !important;
}
.logo > svg:first-child {
-webkit-clip-path: polygon(0 0, 80% 0, 20% 100%, 0 100%);
clip-path: polygon(0 0, 80% 0, 20% 100%, 0 100%);
margin-right: 4px;
padding-right: 4px;
}
.logo > svg:last-child {
-webkit-clip-path: polygon(80% 0, 100% 0, 100% 100%, 20% 100%);
clip-path: polygon(80% 0, 100% 0, 100% 100%, 20% 100%);
margin-left: 4px;
padding-left: 4px;
}<div class='v-banner'>
<div class="logo">
<svg>
<use xlink:href="#atom"></use>
</svg>
<svg>
<use xlink:href="#atom"></use>
</svg>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="atom" viewBox="0 0 482.521 482.521">
<path
d="M469.267,282.493c-2.114-16.46-10.025-29.719-18.284-41.1c-5.995-8.102-12.546-15.276-19.265-21.842 c6.182-7.185,11.986-14.682,17.22-22.589c9.128-14.148,16.799-29.83,18.588-47.453c0.346-4.394,0.384-8.849-0.215-13.275 c-0.383-2.235-0.574-4.331-1.335-6.747l-1.005-3.467c-0.358-1.076-0.724-1.781-1.091-2.684c-3.371-8.232-9.04-15.201-15.512-20.273 c-13.129-10.148-28.104-13.913-41.994-16.126c-14.022-2.091-27.557-2.181-40.389-1.456c-18.008,1.13-34.599,3.825-49.871,7.016 c-2.11-6.561-4.46-13.226-7.147-19.995c-4.842-11.907-10.697-24.105-18.58-35.888c-7.926-11.633-17.747-23.558-32.549-31.117 c-3.771-1.792-7.562-3.305-12.029-4.257c-2.248-0.443-4.797-0.943-6.438-0.994l-2.781-0.223c-0.335-0.004,0.257-0.029-0.833-0.023 l-0.422,0.019l-0.829,0.038l-1.664,0.072c-8.914,0.399-17.712,3.404-25.258,7.891c-15.174,9.166-26.101,22.804-34.976,37.127 c-9.313,15.377-16.547,31.883-22.318,48.996c-12.03-1.576-24.801-2.69-38.292-2.919c-12.854-0.112-26.376,0.6-40.283,3.352 c-13.784,2.84-28.565,7.316-41.23,18.08c-3.115,2.791-5.958,5.704-8.568,9.458c-1.277,1.918-2.706,4.08-3.383,5.565l-1.284,2.477 c-0.129,0.309,0.075-0.241-0.336,0.769l-0.145,0.386l-0.287,0.78l-0.576,1.562c-3.062,8.389-3.666,17.664-2.427,26.359 c2.61,17.532,11.005,32.859,20.81,46.564c5.642,7.721,11.839,14.977,18.408,21.921c-6.443,6.887-12.688,14.394-18.329,22.808 c-7.741,11.759-15.022,25.368-16.375,41.931c-0.222,4.178-0.178,8.258,0.636,12.756c0.453,2.249,0.957,4.799,1.545,6.331 l0.841,2.66c0.122,0.311-0.119-0.229,0.304,0.776l0.166,0.372l0.348,0.761l0.706,1.516c3.763,8.094,9.891,15.081,16.923,20.356 c14.243,10.552,31.02,15.458,47.639,18.21c19.611,3.038,39.51,3.218,59.413,1.555c8.181,29.209,19.519,57.332,36.303,82.129 c9.618,13.835,21.193,26.895,36.806,35.253c3.941,1.989,8.032,3.726,12.36,4.856c2.21,0.504,4.225,1.111,6.744,1.33l3.593,0.388 c1.126,0.083,1.931,0.006,2.902,0.014c8.886,0.015,17.505-2.573,24.635-6.617c14.394-8.291,23.579-20.696,30.917-32.701 c7.267-12.164,12.487-24.646,16.717-36.788c6.396-18.823,10.454-36.832,13.396-53.484c24.355,1.853,48.695,1.204,72.413-3.605 c16.454-3.567,32.974-9.226,46.696-20.419c3.349-2.87,6.524-5.977,9.231-9.539c1.312-1.845,2.661-3.47,3.824-5.714l1.742-3.167 c0.509-1.008,0.742-1.764,1.133-2.666C469.341,299.598,470.266,290.651,469.267,282.493z M328.875,153.375 c-1.521-1.508-3.096-2.963-4.701-4.396c1.396,0.722,2.759,1.406,4.197,2.172C328.531,151.874,328.716,152.659,328.875,153.375z M322.237,147.307c-19.709-16.843-44.76-27.584-72.273-29.328c-2.936-0.99-6.112-2.027-9.507-3.122 c1.888-0.659,3.833-1.321,5.856-1.983c14.038-4.673,31.301-9.744,51.467-13.861c4.641-0.93,9.437-1.816,14.38-2.634 c5.952,15.168,10.281,29.957,13.681,43.593c0.859,3.496,1.574,6.837,2.307,10.188C326.123,149.167,324.164,148.221,322.237,147.307 z M248.946,117.901c-2.293-0.124-4.597-0.2-6.908-0.2c-3.645,0-7.245,0.189-10.81,0.498c2.689-1.009,5.577-2.052,8.64-3.133 C243.09,116.034,246.117,116.989,248.946,117.901z M230.35,118.264c-23.878,2.25-45.771,11.287-63.746,25.161 c2.265-14.457,5.066-28.786,8.72-42.597c1.833,0.247,3.661,0.503,5.442,0.78c20.328,3.165,37.823,7.406,52.066,11.415 c2.229,0.626,4.358,1.242,6.42,1.858C236.086,116.06,233.116,117.189,230.35,118.264z M131.875,185.293 c-8.556,16.816-13.415,35.828-13.415,55.976c0,2.047,0.063,4.085,0.157,6.11c-15.7-9.815-30.795-20.36-44.311-31.968 c13.956-14.38,28.559-26.247,42.148-36.249c6.005-4.383,11.762-8.288,17.388-11.987 C133.052,173.195,132.426,179.247,131.875,185.293z M332.038,325.896c0.41-0.438,0.84-0.858,1.242-1.297 c-0.071,0.471-0.159,0.963-0.234,1.434C332.706,325.983,332.373,325.953,332.038,325.896z M331.004,155.562 c-0.182-1.086-0.373-2.213-0.564-3.33c10.678,5.693,22.562,12.553,35.215,20.906c14.12,9.409,29.354,20.632,44.058,34.446 c-13.335,12.624-28.41,24.178-44.142,34.986c0-0.436,0.027-0.868,0.027-1.305C365.603,207.98,352.417,177.789,331.004,155.562z M366.13,92.086c12.513,0.268,25.536,1.384,38.417,4.342c12.725,3.133,25.729,8.153,34.993,16.928 c9.337,8.698,13.025,21.075,10.457,33.806c-2.418,12.849-9.991,25.478-18.905,37.188c-5.242,6.725-11.093,13.124-17.322,19.305 c-16.117-13.083-32.161-23.567-46.887-32.476c-13.335-7.896-25.663-14.531-36.64-19.995c-0.663-3.835-1.336-7.679-2.118-11.72 c-2.758-13.612-6.198-28.37-11.031-43.859C332.275,93.295,348.706,91.755,366.13,92.086z M191.78,55.968 c6.785-13.046,14.939-25.3,25.513-32.95c5.234-3.808,10.96-6.332,16.928-7.193l1.113-0.161l0.567-0.091l0.287-0.04 c-0.865-0.033-0.046-0.017-0.147-0.021l2.791-0.034c2.08-0.105,3.165,0.172,4.557,0.28c2.788,0.315,5.957,1.193,8.862,2.255 c11.874,4.604,21.965,14.218,30.246,24.361c8.185,10.377,14.769,21.674,20.359,32.87c3.043,6.129,5.742,12.238,8.197,18.312 c-4.721,1.031-9.352,2.101-13.784,3.192c-20.033,5.127-37.198,10.585-51.125,15.623c-2.191,0.785-4.266,1.541-6.297,2.293 c-2.208-0.701-4.477-1.42-6.87-2.153c-14.148-4.375-31.547-9.026-51.798-13.218c-1.702-0.342-3.45-0.667-5.188-0.993 C180.065,83.392,185.181,69.102,191.78,55.968z M31.048,156.812c-1.501-6.292-1.63-12.553-0.123-18.392l0.277-1.092l0.134-0.555 l0.065-0.282c-0.353,0.791-0.021,0.036-0.065,0.126l1.042-2.591c0.701-1.959,1.384-2.856,2.011-4.09 c1.349-2.454,3.385-5.043,5.491-7.316c8.819-9.19,21.58-14.815,34.119-18.553c12.73-3.57,25.68-5.289,38.168-6.153 c12.812-0.84,25.139-0.662,36.849,0.123c-4.494,13.929-8.08,28.23-10.922,42.709c-1.578,8.112-2.903,16.312-4.006,24.559 c-6.074,3.672-12.354,7.576-18.968,11.926c-14.225,9.524-29.679,20.687-45.079,34.397c-6.576-5.92-12.785-12.085-18.389-18.602 C42.222,181.745,34.047,169.507,31.048,156.812z M89.802,335.105c-14.644-1.312-29.079-4.18-40.173-11.048 c-5.507-3.385-10.027-7.727-13.095-12.919l-0.583-0.958l-0.295-0.493l-0.153-0.239c0.31,0.804,0.014,0.038,0.041,0.131 l-1.089-2.566c-0.895-1.883-1.048-2.988-1.476-4.312c-0.781-2.703-1.172-5.976-1.284-9.062 c-0.263-12.728,4.786-25.729,11.01-37.236c4.518-8.021,9.756-15.464,15.28-22.442c15.448,15.383,32.892,28.976,51.265,41.244 c5.778,3.847,11.706,7.513,17.708,11.091c2.246,5.752,4.908,11.3,7.967,16.588c1.439,10.067,3.171,20.069,5.278,29.985 C123.079,335.287,106.132,336.337,89.802,335.105z M311.31,403.998c-5.01,11.469-11.004,23.089-18.644,33.883 c-7.731,10.566-17.335,20.678-28.968,25.905c-11.602,5.313-24.447,4.021-35.251-3.202c-10.954-7.111-19.751-18.933-27.187-31.634 c-12.49-21.937-20.767-47.47-26.922-73.894c4.646-0.766,9.282-1.592,13.907-2.517c16.26,7.885,34.508,12.303,53.792,12.303 c21.567,0,41.842-5.546,59.5-15.253c0.043,0,0.081,0.012,0.126,0.018c8.713,1.302,17.435,2.353,26.172,3.086 C324.076,368.944,318.967,386.357,311.31,403.998z M439.235,314.837c-10.78,7.377-25.078,10.95-39.654,12.925 c-20.75,2.562-42.661,1.483-64.779-1.504c0.153-1.318,0.322-2.638,0.462-3.94c10.22-11.743,18.252-25.415,23.473-40.432 c6.298-4.132,12.498-8.39,18.563-12.849c17.836-13.182,34.674-27.65,49.423-43.82c5.822,6.684,11.385,13.844,16.249,21.609 c6.78,11.201,12.429,23.957,12.769,36.705C456.194,296.282,450.058,307.652,439.235,314.837z"></path>
</symbol>
</svg>
答案 0 :(得分：1)
这样的事情：
.slice {
width: 160px;
height: 120px;
display: inline-block;
position: relative;
background: linear-gradient(to top left, transparent 40.5%, #fff 40%), var(--i) 100% 100%/100px 100px no-repeat;
}
.slice:before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
-webkit-clip-path: polygon(60% 0, 0 0, 0 60%);
clip-path: polygon(60% 0, 0 0, 0 60%);
background: var(--i) 0 0/100px 100px no-repeat;
}<div style="--i:url(https://i.stack.imgur.com/sSOYn.png)" class="slice">
</div>