一侧歪斜和裁剪图像

Question

有没有办法让图片看起来像这样：

用css看起来像这样：

我试过歪斜，但我无法摆脱红色区域，它始终存在，无论我使用何种程度的价值。

我的基本结构如下：

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">
	
	<xsl:output indent="yes"/>
	<xsl:strip-space elements="*"/>
	
	<!-- Identity transformation: copy all nodes -->
    <xsl:template match="node()|@*">
      <xsl:copy>
         <xsl:apply-templates select="node()|@*"/>
      </xsl:copy>
    </xsl:template>
	
	<xsl:template match="column_metadata">
        <column_metadata>
            <C_NOT><xsl:value-of select="@entity"/></C_NOT>
            <xsl:apply-templates select="@*|node()"/>
        </column_metadata>
    </xsl:template>
	
	<!-- overrides identity template if node is datasource (this element should be ignored) -->
    <xsl:template match="datasource"/>
	<!-- overrides identity template if node is parameter (this element should be ignored) -->
    <xsl:template match="parameter"/>
	<!-- overrides identity template if node is role (this element should be ignored) -->
    <xsl:template match="role"/>
	<!-- overrides identity template if node is function (this element should be ignored) -->
    <xsl:template match="function"/>
	<!-- overrides identity template if node is serverevent (this element should be ignored) -->
    <xsl:template match="serverevent"/>
	<!-- overrides identity template if node is serverevent (this element should be ignored) -->
    <xsl:template match="general"/>
	
</xsl:stylesheet>

对于样式，我在这里使用了类似的东西：http://jsfiddle.net/mXLgF/477/

我的CSS：

<div class="wrapper">
    <div class="trapec">
        <div class="image"></div>
    </div>
  </div>

我已经尝试了很多学位值，但红线却没有消失。 请帮忙。

Answer 1

您可以使用describe('Unit - Component: school', function () { beforeEach(module('activityRight.module', 'mockedSchoolJSON')); var ctrl; var SignInCtrl; var $componenetController; var $schoolsService; var $permissionService; var $state; var arAuthenticationService; var $translate, $scope, $notificationService, $auth; var deferred; var CONFIG; var $httpBackend; var $defaultJSON; beforeEach(inject( function (_$componentController_, _$schoolsService_, _$permissionService_, _$stateParams_, _$state_, $rootScope, _arAuthenticationService_, _$notificationService_, _$translate_, _$auth_, $q, _$httpBackend_, defaultJSON, $injector) { $componenetController = _$componentController_; $schoolsService = _$schoolsService_; $permissionService = _$permissionService_; $stateParams = _$stateParams_; $state = _$state_; $scope = $rootScope.$new(); arAuthenticationService = _arAuthenticationService_; $notificationService = _$notificationService_; $translate = _$translate_; $auth = _$auth_; deferred = $q.defer(); $httpBackend = _$httpBackend_; CONFIG = $injector.get('CONFIG'); $defaultJSON = defaultJSON ctrl = $componenetController('arSchoolComponent', { "$schoolsService": $schoolsService, "$permissionService": $permissionService, "$stateParams": $stateParams, "$state": $state, "$scope": $scope, "arAuthenticationService": arAuthenticationService, "$notificationService": $notificationService, "$translate": $translate }); SignInCtrl = $componenetController('arSigninComponent', { '$auth': $auth, 'arAuthenticationService': arAuthenticationService, '$state': $state, }); SignInCtrl.email = ''; SignInCtrl.password = ''; SignInCtrl.authenticate; user = arAuthenticationService.sessionUser(); $permissionService.setUser(user); ctrl.$onInit(); $httpBackend.whenGET('translations/en-ca.json').respond({}); $httpBackend.whenGET('fb-partials/sign-up.html?ver=1').respond({}); $httpBackend.whenGET('fb-partials/main.html?ver=1').respond({}); $httpBackend.when('GET', CONFIG.origin_url + '/api/school/1').respond($defaultJSON.fakeData[0]); $httpBackend.flush(); } )); // Check for open http requests afterEach(function () { $httpBackend.verifyNoOutstandingExpectation(); $httpBackend.verifyNoOutstandingRequest(); }); it('`getSchool` should exist and return data depend on id', function () { expect(ctrl.getSchool).toBeDefined(); ctrl.loading = false; ctrl.selectedSchool = null; spyOn($schoolsService, 'getSchool').and.returnValue(deferred.promise); ctrl.getSchool(2); expect($schoolsService.getSchool).toHaveBeenCalledTimes(1); //will check this error later, need to move one for now //expect(ctrl.selectedSchool.schoolId).toBe(2); }); 伪css。我建议使用:before代码而不是<img>。

根据您的要求调整background-image值。

<强> Updated Fiddle

Stack Snippet

skew()

.container {
  overflow: hidden;
  margin-left: 40px;
}

#parallelogram {
  width: 300px;
  height: 300px;
  overflow: hidden;
  position: relative;
}

img {
  max-width: 100%;
}

#parallelogram:after {
  content: "";
  top: 0;
  left: 100%;
  width: 100%;
  bottom: 0;
  background: #000;
  position: absolute;
  transform: skew(30deg);
  transform-origin: bottom;
  background: #fff;
}